HTML实现水平垂直居中
CSS/CSS3 实现 居中(水平&垂直)
-
水平居中:行内元素
把行内元素放在一个属性块(display:block)元素中,然后设置父层元素属性居中:.test { text-align:center; }
-
水平居中:块状元素
设置外边距.test { margin: 100px auto; }
-
水平居中:多个块状元素
把块状元素属性(display:inline-block),然后设置父层元素属性居中:.test { text-align:center; }
-
水平居中:多个块状元素(flexbox布局实现)
把块状元素的父元素属性 display:flex和justify-content:center,如下设置:.test { text-align:center; }
-
垂直居中:单行的行内元素
设置height和line-height属性.test { height: 100px; line-height:100px; }
-
垂直居中:多行的行内元素
给要居中的父元素设置display:table-cell和vertical-align:middle属性.test { background: red; width: 200px; height: 200px; /* 以下属性垂直居中 */ display: table-cell; vertical-align:middle; }
-
垂直居中:已知高度的块状元素
给要居中的元素设置如下属性.test { top: 50%; margin-top: -50px; /* margin-top值为自身高度的一半 */ position: absolute; padding:0; }
-
水平垂直居中:已知高度和宽度的元素
给要居中的元素设置如下属性
(1).test { position: absolute; margin:auto; left:0; top:0; right:0; bottom:0; }
(2)
.test{ position: absolute; top: 50%; left: 50%; margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */ margin-left: -75px; }
-
水平垂直居中:未知高度和宽度元素
给要居中的元素设置如下属性.test { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 使用css3的transform来实现 */ }
-
水平垂直居中:可用flex
设置如下属性.test { display: flex; justify-content:center; align-items: center; /* 注意这里需要设置高度来查看垂直居中效果 */ background: #AAA; height: 300px; }
参考链接: