关于前端:超全面的CSS居中方法总结

43次阅读

共计 1926 个字符，预计需要花费 5 分钟才能阅读完成。

行内元素的居中

程度居中
  • text-align:center;
<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        text-align: center;
    }
</style>

  • fit-content;
<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        width: fit-content;/* 父元素适应子元素的宽度 */
        margin: auto;
    }
</style>

垂直居中
  • line-height;(只针对单行文本)
<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        height: 200px;
        line-height: 200px;
    }
</style>

块级元素的居中

程度居中

* margin:0 auto;

<body>
    <div class="parent"> 
           <div class="child">content</div>
    </div>
</body>
<style>
    .parent{background-color: red;}
    .child{
        background-color: blue;
        width: 100px;
        margin: 0 auto;/* 左右自适应 */
    }
</style>

程度垂直居中

  1. 定位 
<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
        background-color: blue;
        width: 100px;
       height: 100px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin-top: -50px;
       margin-left: -50px;
    }
</style>

2. 定位 +transform

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
       background-color: blue;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-50%);
       /* 子元素大小未知 */
    }
</style>

3. 定位 +margin

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
        background-color: blue;
        width: 100px;
        height: 100px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

4.padding

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        padding: 20px;
        background-color: red;
    }
    .child{
        height: 200px;
        background-color: blue;
    }
</style>

5.flex

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        display: flex;
        height: 200px;
        align-items: center;
        justify-content: center;
        background-color: red;
    }
    .child{
        height: 100px;
        width: 100px;
        background-color: blue;
    }
</style>

6. 伪元素
7. 函数 calc

正文完
前端
发表至： 前端
2020-12-07
 0
关于前端:SAP-UI5-里一个功能的-compatibility-version-是什么含义
关于前端:从零开始的electron开发更新全量更新
用库存看懂云开发数据库事务
关于前端:面试官问我按钮级别权限怎么控制我说vif面试官说再见