CSS中如何实现上下水平垂直居中?使用CSS实现上下水平垂直居中,是处理布局中经常遇到的问题。以下是一些实现方法: /* flex布局 */ .container { display: flex; a
CSS中如何实现上下水平垂直居中?
使用CSS实现上下水平垂直居中,是处理布局中经常遇到的问题。以下是一些实现方法:
/* flex布局 */ .container { display: flex; align-items: center; justify-content: center; } /* 绝对定位和transform */ .container { position: relative; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* 表格布局 */ .container { display: table; } .center-cell { display: table-cell; vertical-align: middle; text-align: center; } /* grid布局 */ .container { display: grid; } .center { justify-self: center; align-self: center; } /* line-height */ .container { height: 200px; } .center { display: inline-block; line-height: 200px; vertical-align: middle; }
这些方法都能够实现上下水平垂直居中,需要根据实际情况选择适合自己的方法。当然,也可以使用JavaScript等其他工具来实现居中效果。
粉丝
0
关注
0
收藏
0