总结css居中问题的解决办法
程序员文章站
2022-04-11 23:14:37
...
CSS居中遇到的问题总结
水平居中
-
【行内元素】适用inline,inline-block,inline-table,inline-flex元素
.center { text-align: center; }
-
【块级元素】适用于block level元素
①一个块级元素
.center { margin: 0 auto; }
②多个块级元素
方法一:将块级元素变为行内块级元素 html部分: <main class="inline-block-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .inline-block-center { text-align: center; } .inline-block-center p { display: inline-block; text-align: left; } 方法二:flex布局 html部分: <main class="flex-center"> <p>1</p> <p>2</p> <p>3</p> </main> css部分: .flex-center{ display:flex; justify-content:center; }
垂直居中
-
【行内元素】
①单个行内元素:
情况一:当link或文本有包裹元素时,设置相等的上下padding
.link { padding-top: 30px; padding-bottom: 30px; }
情况二:当link或文本没有包裹时,设置行高和高度相等
.center-text-trick { height: 100px; line-height: 100px }
②多个行内元素:
方法一:将多个行内元素分别置于table-cell中 html部分: <table> <tr> <td> 1 </td> </tr> </table> css部分: table td { background: black; color: white; padding: 20px; border: 10px solid white; /* default is vertical-align: middle; */ } 方法二:将父元素设置为display:table,将自身设置为display:table-cell html部分: <p class="center-table"> <p>1</p> </p> css部分: .center-table { display: table; height: 250px; width: 240px; } .center-table p { display: table-cell; vertical-align: middle; } 方法三:使用felex html部分: <p class="flex-center"> <p>1</p> </p> css部分: .flex-center{ display: flex; justify-content: center; flex-direction: column; height: 400px;/*父容器必须有固定高度*/ } 方法四:当以上代码均不可用时,可尝试此奇淫巧技 html部分: <p class="ghost-center"> <p>1</p> </p> css部分: .ghost-center { position: relative; } .ghost-center::before { content: " "; display: inline-block; height: 100%; width: 1%; vertical-align: middle; } .ghost-center p { display: inline-block; vertical-align: middle; }
-
【块级元素】
①已知元素高度(绝对定位+负的margin)
.parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* 为元素高度的一半,没有box-sizing时,为height+padding+border的一半*/ }
②不知元素高度(与上一方法,大同小异)
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
③flex布局
.parent { display: flex; flex-direction: column; justify-content: center; }
水平垂直均居中
①有固定宽高的元素
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px;/* 注意此处为height+padding+的一半*/ }
②没有固定宽高的元素(同之前没有固定宽高元素一样,用transform解决)
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
③使用flexbox布局
.parent { display: flex; justify-content: center; align-items: center; }
以上就是总结css居中问题的解决办法的详细内容,更多请关注其它相关文章!
上一篇: Ack函数,php
推荐阅读
-
浅谈css3中calc在less编译时被计算的解决办法
-
解决django后台样式丢失,css资源加载失败的问题
-
windows 2008上启用防火墙后Oracle tnsping不通问题的解决办法
-
最大K个数问题的Python版解法总结
-
Android setButtonDrawable()的兼容问题解决办法
-
.Net获取URL中文参数值的乱码问题解决方法总结
-
Windows 64 位 mysql 5.7以上版本包解压中没有data目录和my-default.ini及服务无法启动的快速解决办法(问题小结)
-
Url相对路径的问题总结
-
Android 使用volley过程中遇到的问题解决办法
-
Android的App启动时白屏的问题解决办法