div水平垂直居中转载

1、

div.parent { display: flex; justify-content: center; align-items: center; }

2、

div.parent { position: relative; } div.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
} / 或者 / div.child { width: 50px; height: 10px; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -5px; } / 或 / div.child { width: 50px; height: 10px; position: absolute; left: 0; top: 0; right: 0; bottom: 0;

3、

div.parent { display: grid; } div.child { justify-self: center; align-self: center; }

4、

div.parent { font-size: 0; text-align: center; &::before { content: ""; display: inline-block; width: 0; height: 100%; vertical-align: middle; } } div.child{ display: inline-block; vertical-align: middle; }

5、

div.parent { display: table; } div.child { display: table-cell vertical-align: middle; text-align: center; }

转载于:https://www.cnblogs.com/anbozhu7/p/11270136.html