css中怎么将div设置为居中-猿码集

1. 前言

在CSS布局中，居中是一个非常重要的操作，尤其是在响应式设计中更是不可或缺。在本文中，将介绍如何在CSS中将div设置为居中。

2. 水平居中

2.1 文本水平居中

如果要将一段文本水平居中，可以使用text-align属性。例如，以下代码可以将一段居左文本水平居中：


    .container {
        text-align: center;
    }

注：上述代码只会影响该元素内部的文本。

2.2 块元素水平居中

如果要将块级元素水平居中，可以使用margin属性，将左右的margin设置为auto。例如，以下代码可以将一个宽度为200px的div元素水平居中：


    .container {
        width: 200px;
        margin: 0 auto;
    }

这是因为设置了margin-left和margin-right为auto后，浏览器会自动将左右margin平分，从而实现水平居中效果。

注：如果父容器的宽度为100%且子元素宽度小于父容器宽度，则需要设置子元素的宽度为100%。

2.3 flexbox实现水平居中

flexbox是一个非常强大和流行的布局模式，可以很容易地实现水平和垂直的居中效果。以下示例可以使用flexbox将div元素水平居中：


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

flexbox将子元素放在一个弹性容器中，通过设置justify-content和align-items属性，可以轻松地实现水平和垂直居中效果。

3. 垂直居中

3.1 行高垂直居中

如果要将一行文本垂直居中，可以使用line-height属性。例如，以下代码可以将一行居左文本垂直居中：


    .container {
        line-height: 100px;
    }
    .text {
        display: inline-block;
        vertical-align: middle;
    }

通过设置父容器的line-height属性，子元素的显示区域就会居中，然后通过设置子元素的display和vertical-align属性，实现垂直居中效果。

3.2 table-cell垂直居中

如果要将任何元素垂直居中，可以使用Table-Cell技巧。该技术涉及使用display:table-cell，vertical-align: middle来垂直居中。


    .container {
        display: table-cell;
        vertical-align: middle;
    }

这使得容器垂直居中了，但是你需要注意你的容器必须在一个display:table的父级元素内，否则会出现奇怪的布局错误。

3.3 flexbox实现垂直居中

如前所述，flexbox实现垂直方向的布局是非常容易和方便的。以下示例可以使用flexbox将子元素垂直居中：


    .container {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

这里将容器的flex-direction属性设置为column，意思是所有子节点将竖着放置。

4. 水平和垂直居中

如果要同时将一个div元素的水平和垂直居中，可以使用2.2和3.3中所述的技巧。例如，以下代码可以将一个200px * 200px的div元素水平和垂直居中：


    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .box {
        width: 200px;
        height: 200px;
    }

5. 总结

在CSS中将div设置为居中是CSS布局中不可或缺的一部分，学好几种方法后，在制作响应式布局时，就可以用一些方法来应对限制。可以根据具体的布局选择适合自己的方法实现居中布局。

css中怎么将div设置为居中