css-水平和垂直布局

最新推荐文章于 2024-08-07 11:21:21 发布

github_34514750

最新推荐文章于 2024-08-07 11:21:21 发布

阅读量9.2k

点赞数

分类专栏：百度前端技术学院 css 文章标签： css 布局居中

本文链接：https://blog.csdn.net/github_34514750/article/details/51044595

版权

本文详细介绍了CSS中实现元素水平居中、垂直居中以及水平垂直居中的多种方法，包括text-align、margin、inline-block、flex布局、position定位等。适合于不同场景下的元素对齐需求。

摘要由CSDN通过智能技术生成

1.元素的水平居中？垂直居中？水平垂直居中？

水平居中

1.如果需要居中的是常规流中inline元素—图片，按钮，文字等行内元素(display为inline或inline-block等)

则在 父元素 中使用text-align: center;

<div class="content">
    <span>a aa a</span>
</div>

<style>
   .content{
        width: 500px;
        border: 1px solid black;
        text-align: center;
   }
</style>

2.如果需要居中的是常规流中block元素—是常规流，对浮动元素或绝对定位元素无效。
或者是多个元素的水平排列，可以用flex或者是inline-bolck和text-align:center;

已经知道宽度：用margin
不知道宽度：1.display:inline-block,父元素text-align 2.flex布局

则需要为

1.元素设置宽度，
2.设置左右margin为auto，
3.IE6下需在父元素上设置text-align: center;再给子元素恢复需要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

或者使用inline-block水平居中

仅inline-block属性是无法让元素水平居中，display:inline-block;
关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果

或者用flex布局

<div class="flex">
    <div class="child ">
        non-child
    </div>
</div>

.flex{
       width: 300px;
       height: 200px;
       border: 2px solid #ccc;
       box-sizing: border-box;
       display:flex;
       flex-direction: row;
       justify-content:center;

   }
 .child{
       width: 100px;
       height: 100px;
       background: green;
       box-sizing: border-box;
   }

3.如果需要居中的元素为浮动元素

则需要为：

1.为元素设置宽度

2.position: relative

3.浮动方向偏移量（left或者right）设置为50%

4.浮动方向上的margin设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple