css上下居中（css上下剧中）

CSS上下居中

在网页设计中，我们常常需要把一个盒子或者一个文字块垂直居中，这时就需要使用CSS来实现上下居中。

一、使用表格

使用表格实现上下居中，比较简单。只需要让表格的单元格的vertical-align属性设为middle，即可将单元格垂直居中。单元格内部的内容也会跟随垂直居中。

二、使用flex布局

在CSS3中，我们可以使用flex布局来实现上下居中，这种方法相对于表格来说更加灵活。以下是实现方法：

.container {

display: flex;

align-items: center;

justify-content: center;

在这里，我们把容器的display属性设置为flex，这样容器内部元素可以使用flex属性进行布局。align-items的属性值为center，表示容器内部的元素将垂直居中。而justify-content的属性值也为center，表示水平居中。

三、使用position

另一种实现上下居中的方法是使用position和transform。首先，我们需要让容器的position属性设置为relative，这样内部的元素才能参照其进行定位。接着，我们给内部的元素设置position:absolute，再将top和left属性值都设为50%，即让元素定位在容器中央。但是，这时元素只是部分居中，还需要把元素的高宽分别设为负值，这样才能让元素完全居中。

.container {

position: relative;

.child {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

height: 100px;

width: 200px;

在这里，我们把内部元素的top和left属性值都设置为50%，再使用transform将元素的位置上移和左移50%的高度和宽度，此时元素已经完全居中。

结语

通过以上三种方法，我们可以实现CSS上下居中的效果。根据不同的需求，我们可以选择不同的方法来实现居中效果，使我们的网页设计更加美观和实用。