前言
居中是样式中常用的操作，这里简单做一下总结：
下面的是基础文件样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .parent { width: 200px; height: 100px; position: relative; background-color: red; } .parent .child { width: 100px; height: 50px; background-color: yellow; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
一、水平居中
1、子元素为内联样式时（inline-block）
把子元素设置内联样式包括（display: inline-block | inline-flex | inline-grid | inline-table 也含有内联样式特性)，只需要设置父元素的text-align:center）
<style> /* 水平居中 子元素是内联元素时 */ .parent { text-align: center; } .child { display: inline-block; } </style>
2、子元素为块级元素
父元素和子元素都是块级元素，子元素设置margin: 0 auto, 必须设置宽度即可。
<style> /* ============================= */ /* 水平居中 父子元素都为块级元素 */ .parent {} .child { width: 100px; margin: 0 auto; } /* ============================= */ </style>
3、子元素 position:absolute
子元素设置为绝对定位，向左距离50%，transform向左平移自身的-50%
<style> /* ============================= */ /* 子元素设置为绝对定位时 */ .parent {} .parent .child { position: absolute; left: 50%; transform: translate(-50%, 0); } /* ============================= */ </style>
4、父元素flex布局
<style> /* ============================= */ /* 父元素设置为flex，内容设置为居中 ，子元素可以是块级也可以是内联*/ .parent { display: flex; justify-content: center; } .parent .child {} /* ============================= */ </style>
二、垂直居中
1、子元素为块级和内联 (使用vertical-align注意事项)
子元素为块级block 或者内联 inline-block都可以
<style> /* ============================= */ /* 父元素设置为flex，内容设置为居中 ，子元素可以是块级也可以是内联*/ .parent { display: table-cell; // 这个一定要设置 vertical-align: middle; } .parent .child { } /* ============================= */ </style>
2、子元素设置绝对定位 absolute
<style> /* ============================= */ /* 子元素设置绝对定位*/ .parent {} .parent .child { position: absolute; top: 50%; transform: translate(0, -50%); } /* ============================= */ </style>
3、父元素设置为 flex布局
子元素可以是内联也可以是块级元素
<style> /* ============================= */ /* 子元素设置绝对定位*/ .parent { display: flex; align-items: center; } .parent .child {} /* ============================= */ </style>
三、水平且垂直居中
1、子元素是内联 inline-block
设置子元素 display : inline-block 注意子元素需要设置 width 和 height
<style> /* ============================= */ /* 子元素设置绝对定位*/ .parent { /* 水平居中 */ text-align: center; /* 垂直居中 */ display: table-cell; vertical-align: middle; } .parent .child { /* 子元素必须是内联 因为水平居中要使用text-align */ display: inline-block; } /* ============================= */ </style>
2、子元素绝对定位 absolute
父亲设置相对定位，孩子设置绝对定位
<style> /* ============================= */ .parent { /* 父亲设置相对定位，孩子的绝对定位会相对父亲来移动 */ position: relative; } .parent .child { /* 孩子设置绝对定位， */ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } /* ============================= */ </style>
3、父元素flex布局
浏览器支持 ie11
<style> /* ============================= */ .parent { display: flex; justify-content: center; align-items: center; } .parent .child { } /* ============================= */ </style>
四、单行文本垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 100px; height: 50px; background-color: pink; line-height: 50px; } </style> </head> <body> <div> 文字垂直居中 </div> </body> </html>