css 垂直居中方式 |css3 button 居中对齐

CSS 垂直居中方式 在 CSS 中垂直居中一直是一个令人头疼的问题。本文将讨论常见的几种垂直居中方式。 1. 使用 display: flex 使用 display: flex 可以非常容易地实现垂直居中。只需要将 flex 容器的 align-items 属性设置为 center 即可。 “`css .container { display: flex; align-items: center; /* 垂直居中 */ } “` 2. 使用 table-cell table-cell 是另一种常用的垂直居中方式。使用 table-cell 可以将元素视为表格单元格进行布局。需要将父元素的 display 属性设置为 table 和 vertical-align 设置为 middle。 “`css .container { display: table; } .item { display: table-cell; vertical-align: middle; /* 垂直居中 */ } “` 3. 使用绝对定位 使用绝对定位可以将元素放置在父元素的中间。需要将元素的 top 和 margin-top 属性设置为 50%，同时将元素的高度设置为父元素的高度的一半。 “`css .container { position: relative; } .item { position: absolute; top: 50%; margin-top: -25px; /* 需设置元素高度的一半 */ } “` 4. 使用 transform 使用 transform 也可以将元素垂直居中。需要将元素的 position 属性设置为 absolute 和 left 和 top 属性设置为 50%，同时使用 transform: translate(-50%, -50%) 将元素居中。 “`css .container { position: relative; } .item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); /* 垂直居中 */ } “` 以上是常见的几种 CSS 垂直居中方式。根据实际情况选择最适合自己的方式来实现垂直居中。