css如何让一个宽高都不固定的div中的元素水平、垂直都居中
我首先在body中创建一个div,id名为“mydiv”,class名为“center”,在mydiv样式中,我给div设置了宽度为100%,即为body的宽度,高度我随便设置了一下(实际开发中,很多情况下高度是不固定的)。然后center样式中添加了如下这三句话,即可使div中元素上下左右都居中。
align-items:center; display: -webkit-flex; justify-content:center;
其中,如果只设置前两句话,那么div中上下居中。
如果只设置后两句话,那么div中左右居中。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #mydiv { width: 100%; height: 580px; background-color: #2ca1f4; color: white; font-size: 50px; } .center { align-items:center; display: -webkit-flex; justify-content:center; } </style> </head> <body> <div id="mydiv" class="center"> 哈哈哈哈 </div> </body> </html>
顺带提一嘴,如果使用绝对定位来达到垂直、水平都居中的话,那么外层div设置
position: relative;div内子div样式设置为如下即可。
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);