一、水平居中
1.行内元素或类行内元素（比如文本和链接）
方法：
(1)父元素为块级元素，直接对父元素设置 text-align:center;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { text-align: center; } span { background-color:lightblue; } </style> </head> <body> <div class="box"> <span>Maday is another day!</span> </div> </body> </html>
(2)当父元素不是块级元素,先将父元素设置为display:block，再设置text-align:center.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> span { display: block; text-align: center; } body { background-color: lightblue; } </style> </head> <body> <span> <a href="#">我是块级元素</a> </span> </div> </body> </html>
这个方法同样可以让inline/inline-block/inline-table/flex等类型元素水平居中
2.块级元素
（1）设置了宽度的块级元素
方法一：使用margin:0 auto;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; } .content { width: 100px; height: 100px; margin: 0 auto; } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
方法二：将父元素设置为相对定位，再将子元素设置为绝对定位。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; position: relative; } .content { background-color: yellow; width: 100px; height: 100px; position:absolute; left:50%; margin-left: -50px; } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
(2)块级元素未设置宽度
方法一：先将子元素设置为display:inline-block,再给父元素设置text-align:center;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; text-align: center; } .content { background-color: yellow; display: inline-block; } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
方法二：利用transform:translateX()
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; position: relative; } .content { background-color: yellow; position:absolute; left:50%; transform: translateX(-50%)； } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
方法三：利用flex布局(无论子元素是否设置宽度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; display:flex; justify-content: center; } .content { background-color: yellow; } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
方法四：利用grid布局,给父元素设置display:grid和justify-content:center（也可以写justify-items:center）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width:500px; height:500px; display:grid; /*justify-content: center;* 此方法也可生效*/ justify-items:center; } .content { background-color: yellow; } </style> </head> <body> <div class="box"> <div class="content">我是块级元素</div> </div> </body> </html>
二、垂直居中
1.单行的行内元素
方法一：设置行内元素的行高等于父元素高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; } span { background-color: yellow; line-height: 500px; } </style> </head> <body> <div class="box"> <span>我是行内元素</span> </div> </body> </html>
方法二：通过设置父元素的伪元素::after的行高跟父元素高度相同
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; } .box::after { content:""; line-height:500px; } span{ background-color: yellow; display: inline-block; } </style> </head> <body> <div class="box"> <span>我是行内元素</span> </div> </body> </html>
2.多行的行内元素
方法一：通过设置父元素的伪元素::after，其行高等于父元素高度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; } .box::after { content:""; line-height:500px; } span{ background-color: yellow; display: inline-block; } </style> </head> <body> <div class="box"> <span>我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span> </div> </body> </html>
方法二：通过将父元素设置display:table-cell和vertical-align:middle(能够使用vertical-align属性有：inline,line-block,table-cell)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: table-cell; vertical-align: middle; } span{ background-color: yellow; } </style> </head> <body> <div class="box"> <span>我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我们是多行的行内元素</span> </div> </body> </html>
方法三：使用flex布局，父元素设置为display:flex和align-items:center;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: flex; align-items: center; } span{ background-color: yellow; } </style> </head> <body> <div class="box"> <span>我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我们是多行的行内元素</span> </div> </body> </html>
方法四：使用flex布局，将父元素设置display:flex和子元素设置margin:auto 0
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: flex; } span{ background-color: yellow; margin: auto 0; } </style> </head> <body> <div class="box"> <span>我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我们是多行的行内元素</span> </div> </body> </html>
3.块级元素
方法一：使用flex布局，给父元素设置display:flex和子元素设置margin:auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: flex; } p{ background-color: yellow; margin: auto 0; } </style> </head> <body> <div class="box"> <p>我是块级元素</p> </div> </body> </html>
方法二：使用flex布局，将父元素设置display:flex和align-items:center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: flex; align-items: center; } p{ background-color: yellow; } </style> </head> <body> <div class="box"> <p>我是块级元素</p> </div> </body> </html>
方法三：使用定位，父元素设置为相对定位，子元素设为绝对定位，给子元素top:50%（父元素高度一半）和transform:translate(-50%)(子元素高度一半)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; position:relative; } p{ background-color: yellow; position: absolute; top:50%; margin:0; transform: translateY(-50%); } </style> </head> <body> <div class="box"> <p>我是块级元素</p> </div> </body> </html>
方法四：将父元素设置display:table-cell和vertical-align:middle，子元素设置为display:inline-block
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; display: table-cell; vertical-align: middle; } p{ background-color: yellow; display: inline-block; } </style> </head> <body> <div class="box"> <p>我是块级元素</p> </div> </body> </html>
方法四：给父元素添加伪元素::after,设置伪元素行高等于父元素行高
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: lightblue; width: 500px; height: 500px; } .box::after { content:""; line-height: 500px; } p{ background-color: yellow; display: inline-block; } </style> </head> <body> <div class="box"> <p>我是块级元素</p> </div> </body> </html>