接下来看块级元素：
基本代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <link rel="stylesheet" type="text/css" href="./html_test.css"> <style> *{ padding:0; margin:0; } .container{ width: 400px; height: 400px; border: 1px solid red; } .content{ background-color: #129E5A; width: 200px; height: 200px; } </style> </head> <body> <div class="container"> <div class="content"> </div> </div> </body> </html>页面效果如下：
绝对定位的块级元素水平居中：
.container{ position: relative; } .content { position: absolute; margin: 0 auto; /*水平居中*/ left: 0; /*此处不能省略，且为0*/ right: 0; /*此处不能省略，且为0*/ }方法一：absolute + 负margin：
设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px。
.container{ position: relative; } .content { position: absolute; top: 50%; left: 50%; margin-left: -100px; /* 外边距为自身宽高的一半 */ margin-top: -100px; /* 外边距为自身宽高的一半 */ }方法二：absolute+margin:auto
设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;
.container{ position: relative; } .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }方法三：absolute+transform
让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，达到居中效果。
.container{ position: relative; } .content { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); }方法四：flex
display: flex;设置 display 属性的值为 flex 将其定义为弹性容器
align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中
justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中
.container{ position: relative; display: flex; display: -webkit-flex; /* Safari */ align-items: center; justify-content: center; }