javascript - css 控制 div 始终水平垂直居中，这个div大小还不同
问题描述
css 控制加了一个统一类名的p，想让他水平垂直居中显示，但是这个p大小不一样，css就不能写固定，其他同学有什么好的思路没
问题解答
回答1：flex布局吧
<!DOCTYPE html><html><head><meta charset='utf-8'> <title></title><style> #main{ width:220px; height:300px; border:1px solid black; display:flex; justify-content:center; align-items:center;}#main p{ }</style></head><body><p id='main'> <p style='background-color:coral;'>红色</p></p></body></html>
一种是使用flex布局，使子元素水平垂直居中；另一种是使用绝对定位加transform移动位置。.flex { display: flex; align-items: center; justify-content: center;}
.one { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
传送门
回答3：垂直居中：表格布局法 行内块法绝对定位法视口居中基于flexbox 的方案
回答4：老生常谈的问题，国外已经有人整理了各种情况的垂直居中：https://css-tricks.com/center...
甚至直接给你生成代码，还考虑是否兼容IE：http://howtocenterincss.com/
也可以看看翻译过的版本：https://github.com/chenjsh36/...
看完再也不怕各种垂直居中问题 23333
回答5：父元素加display:flex,align-items:center
回答6：上面使用弹性布局可以,但是不支持低级浏览器，可以使用绝对定位来使p垂直水平居中
p{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 620px; height: 618px; margin: auto; padding: 30px 0; box-sizing: border-box;}回答7：
同样建议 flex布局
回答8：各种弹层？各种计算？左右居中很简单，只需要
margin:0 auto;即可，但是上下就稍微麻烦点了。虽然麻烦很多方式啊
1，js判断，这个比较笨重，就不说了，简单会js的朋友都会
2，disable:table. 这个需要两个dom配合，不推荐，主要兼容性也一般
3，利用transfrom,这个如果不考虑兼容，不知道高度，极力推荐。大概方式如下：
.dom{ 宽自己定义 position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%;}知道宽度，不知道高度 推荐这个
4，如果知道宽高，那就不用上面了，因为上面不兼容啊，这个狂兼容，代码如下：
.dom{ 宽高自己定义 position: absolute; margin: auto; top:0; right: 0; bottom:0; left: 0;}5,flex 布局，除了兼容，其他都没问题。
<p class='mask'>
<p class='mask-con'> 这是文字信息</p>
</p>.mask{
position: fixed;top:0;left: 0;width: 100vw;height: 100vh;background: rgba(0,0,0,.5);z-index: 1;display: flex;justify-content: center;align-items: center;
}.mask-con{
width: 200px;/*height: 90px;*/height: auto;background: #fff;font-size: 14px;padding: 20px;border-radius:10px;
}6， 如果考虑兼容====>请回看第一条。【都什么年代了 还考虑IE789 主要IE7 DOM1 支持都不大好，所以。。。】7，其他没啥了。以上几种绝对够用了。有好的，请给予补充
回答9：父元素
{ position: relative;}
子元素
{position:absolute;top:50%;left:50%;transform:(-50%,-50%);}回答10：
再补充三个方法。
采用绝对或固定定位居中一个已知宽度和高度的元素:
.horizontal-and-vertical-center { width: 200px; height: 200px; position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}
采用 display: table 布局居中元素，支持不确定的宽度和高度，并且兼容 IE8+ 和其他现代浏览器:
.table { display: table; width: 100%; height: 100%; position: fixed; top: 0; left: 0;} .cell { display: table-cell; vertical-align: center;} .horizontal-and-vertical-center { width: 800px; margin: 0 auto; /* 如果不定宽度的话用 inline-block 并且外层 text-align: center */}
:before 伪元素撑开行高 (AmazeUI 在 modal 组件中使用的办法，并且支持不确定的宽度和高度, IE8+):
.am-modal { /* ... */ text-align: center; /* ... */}.am-modal:before { content: '200B'; display: inline-block; height: 100%; vertical-align: middle}.am-modal-dialog { position: relative; display: inline-block; vertical-align: middle; margin-left: auto; margin-right: auto; /* ... */}
网公网安备