<div class="parent">
<div class="child">DEMO</div>
</div>
水平居中 (1)inline-block + text-align 优点是兼容性好。 inline-block 内容有多宽,就是多宽。 text-align 对inline元素有用。但是需要一些代码修复,text-align:center造成的问题。 <style type="text/css"> .parent {width: 200px; height: 30px; text-align: center;background-color: #ccc;} .child {display: inline-block;background-color: #369;} </style> (2)table + margin table 即像block元素,宽度又跟着内容走。 优点是指设定了child元素,不关系parent的样式。在ie8支持。 <style type="text/css"> .parent {width: 200px; height: 30px; background-color: #ccc; } .child {display: table; background-color: #369;margin: 0 auto;} </style> (3)absolute + transform transform:translateX(-50%) 移动自身的-50%的像素。 问题:主要是兼容性的问题,transform是css3. <style type="text/css"> .parent {position: relative; width: 200px; height: 20px; background-color: #ccc;} .child {position: absolute; left: 50%; transform: translateX(-50%); background-color: #369;} </style> (4) flex + justify-content 优点:只需要设定父元素。 或者对child 设定 margin: 0 auto; 缺点:低版本的不支持flex <style type="text/css"> .parent {display: flex; justify-content:center; width: 200px; height: 20px; background-color: #ccc;} </style> 垂直居中 (1)table-cell + vertical-align 变成单元格,加上vertical-align:middle; 优点:兼容性比较好。 <style type="text/css"> .parent {display: table-cell; vertical-align: middle; height: 100px;background-color: #ccc;} .child {background-color: #369;} </style> (2) absolute + transform <style type="text/css"> .parent {position: relative; height: 100px;background-color: #ddd;} .child {position: absolute; top: 50%; transform: translateY(-50%);} </style> (3)flex + align-items 优点只需要设定parent。 <style type="text/css"> .parent {display: flex; align-items:center; height: 100px;background-color: #ddd;} .child {background-color: #369;} </style> 水平和垂直都居中 (1) inline-block + text-align + table-cell + vertical-align <style type="text/css"> .parent { width: 100px; height: 100px; background-color: #444; text-align: center; display: table-cell; vertical-align: middle; } .child { background-color: #369; display: inline-block; } </style> (2)absolute + transform <style type="text/css"> .parent { width: 100px; height: 100px; background-color: #444; position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } </style> (3)flex + justify-content + align-items <style type="text/css"> .parent { width: 100px; height: 100px; background-color: #444; display: flex; justify-content: center; align-items:center; } .child { background-color: #369; } </style>
时间: 2024-10-10 14:39:17