将一个块级元素水平和垂直居中的方法
Posted lotus3904
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将一个块级元素水平和垂直居中的方法相关的知识，希望对你有一定的参考价值。
1.水平居中
方法一：（分宽高定不定两种情况）
定宽高：需要谁居中，就给谁设margin:auto；使盒子（元素）自己居中
1 <style> 2 .father { 3 width: 500px; 4 height: 500px; 5 background-color: yellow; 6 } 8 .son { 9 width: 100px; 10 height: 100px; 11 background-color: pink; 12 margin:auto; 13 } 14 </style> 15 16 <div class="father"> 17 <div class="son">我是块级元素</div> 18 </div>
不定宽高：默认子元素宽高和父元素一样，这时需要设置子元素display:inline-block;或display:inline；（即将其转化为行内块或行内元素，内容的高度会撑起子元素的高度），然后给父元素设置text-align:center;
1 <style> 2 .father { 3 width: 500px; 4 height: 500px; 5 background-color: yellow; 6 text-align: center; 7 } 8 .son { 9 background-color: pink; 10 display: inline; 11 } 12 </style> 13 14 <div class="father"> 15 <div class="son">我是块级元素</div> 16 </div>
方法二：使用flex布局，在父元素上设置justify-content
1 <head> 2 <style> 3 .father{ 4 width: 500px; 5 height: 500px; 6 background-color: red; 7 display: flex; 8 justify-content: center; 9 } 10 .son{ 11 height: 100px; 12 width: 100px; 13 background-color: yellow; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="father"> 19 <div class="son">我是块级元素</div> 20 </div> 21 </body>
2.垂直居中
方法一：使用flex布局，在父元素上设置align-items
该属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。
1 <style> 2 .father{ 3 width: 500px; 4 height: 500px; 5 background-color: red; 6 display: flex; 7 align-items: center; 8 9 } 10 .son{ 11 height: 100px; 12 width: 100px; 13 background-color: yellow; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="father"> 19 <div class="son">我是块级元素</div> 20 </div> 21 </body>
方法二：使用position定位布局
宽高已知的情况下，给父元素设置相对定位，子元素设置绝对定位；margin-top为子元素高度一半的取负
1 <style> 2 .father{ 3 width: 500px; 4 height: 500px; 5 background-color: red; 6 position: relative; 7 } 8 .son{ 9 height: 100px; 10 width: 100px; 11 background-color: yellow; 12 position: absolute; 13 left: 0; 14 bottom: 0; 15 right: 0; 16 top: 50%; 17 margin-top: -50px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="father"> 23 <div class="son">我是块级元素</div> 24 </div> 25 </body>
方法三：使用table-cell布局，设置在父元素上，高度定不定都OK
1 <style> 2 .father{ 3 width: 500px; 4 height: 500px; 5 background-color: red; 6 display: table-cell; 7 vertical-align: middle; 8 } 9 .son{ 10 height: 100px; 11 width: 100px; 12 background-color: yellow; 13 } 14 </style> 15 </head> 16 <body> 17 <div class="father"> 18 <div class="son">我是块级元素</div> 19 </div> 20 </body>
3.水平和垂直居中
方法一：使用position+margin
1 <style> 2 .father{ 3 width: 500px; 4 height: 500px; 5 background-color: red; 6 position: relative; 7 } 8 .son{ 9 height: 100px; 10 width: 100px; 11 background-color: yellow; 12 position: absolute; 13 top: 0; 14 right: 0; 15 bottom: 0; 16 left: 0; 17 margin: auto; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="father"> 23 <div class="son">我是块级元素</div> 24 </div> 25 </body>
方法二：使用position+transform，transform设置在子元素上
1 <style> 2 .father{ 3 width: 500px; 4 height: 500px; 5 background-color: red; 6 position: relative; 7 } 8 .son{ 9 height: 100px; 10 width: 100px; 11 background-color: yellow; 12 position: absolute; 13 top:50%; 14 left: 50%; 15 transform: translate(-50%,-50%); 16 } 17 </style> 18 </head> 19 <body> 20 <div class="father"> 21 <div class="son">我是块级元素</div> 22 </div> 23 </body>
以上是关于将一个块级元素水平和垂直居中的方法的主要内容，如果未能解决你的问题，请参考以下文章