CSS中的居中

一、水平居中

文字水平居中

单行文字水平居中,对于含有inline-*的元素都可以用下面的方法实现水平居中。

语法: text-ailgn:center

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            /*text-align: center;*/
        }
    style>
head>
<body>
<div class="box1">
    昨夜星辰昨夜风,画楼西畔桂堂东
div>
body>
html>

CSS中的居中_第1张图片
CSS中的居中_第2张图片

块元素水平居中

语法

margin:0 auto;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;

        }
        .box2{
            height: 40px;
            width: 40px;
            border: 1px solid red;
            background-color: yellow;
            /*margin: 0 auto;*/
        }
    style>
head>
<body>
<div class="box1">
   <div class="box2">div>
div>
body>
html>

CSS中的居中_第3张图片
CSS中的居中_第4张图片

二、垂直居中

文字的垂直居中

1.单行文字

line-height:“height的值”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            text-align: center;
            line-height: 400px;
        }
    style>
head>
<body>
<div class="box1">
    昨夜星辰昨夜风,画楼西畔桂堂东
div>
body>
html>

CSS中的居中_第5张图片

多行文字的水平居中

行内块元素也用这种方法居中

父元素{
display:table-cell
vertical-align:middle
}
子元素{
display:inline-block
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;
            text-align: center;
            display: table-cell;
            vertical-align: middle;

        }
        span{
            display: inline-block;
        }
    style>
head>
<body>
<div class="box1">
    <span>
    昨夜星辰昨夜风,画楼西畔桂堂东。
    身无彩凤双飞翼,心有灵犀一点通。
    隔座送钩春酒暖,分曹射覆蜡灯红。
    嗟余听鼓应官去,走马兰台类转蓬。
        昨夜星光灿烂,夜半却有习习凉风;我们酒筵设在画楼西畔、桂堂之东。身上无彩凤的双翼,不能比翼齐飞;内心却象灵犀一样,感情息息相通。互相猜钩嬉戏,隔座对饮春酒暖心;分组来行酒令,决一胜负烛光泛红。可叹呵,听到五更鼓应该上朝点卯;策马赶到兰台,像随风飘转的蓬蒿。
span>
div>
body>
html>

CSS中的居中_第6张图片

块元素的垂直居中

position:absolute;
top:50%;
left:50%;
margin-top:“负的height值的一半”;
margin-left:“负的width值的一半”

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS中常用技巧title>
    <style>
        .box1{
            height: 400px;
            width: 800px;
            border: 1px solid red;

        }
        .box2{
            height: 40px;
            width: 40px;
            border: 1px solid red;
            background-color: yellow;
            /*margin: 0 auto;*/
        }
    style>
head>
<body>
<div class="box1">
   <div class="box2">div>
div>
body>
html>

你可能感兴趣的:(CSS中的居中)