zoukankan      html  css  js  c++  java
  • CSS实现水平居中的几种方法

    行内元素水平居中

    只需要给父元素设置 text-align:center; 即可。

    <div>
      <span>行内水平居中</span>
    </div>
    
    div{
      border:1px solid red;
      text-align:center;
    }
    


    块级元素水平居中

    定宽

    margin: 0 auto;

    块级元素的 width 一定时,只需要给需要居中的块级元素设置 margin: 0 auto; 即可。

    <div>定宽块级元素水平居中</div>
    
    div {
       200px;
      border: 1px solid red;
      margin: 0 auto;
    }
    

    position + margin-left

    使用绝对定位,然后设置 left: 50%; 以及 margin-left 设置为负数的宽度的一半。

    <div>定宽</div>
    
    div {
      border: 1px solid red;
      position: absolute;
       80px;
      left: 50%;
      margin-left: -40px;
    }
    

    position + left + right + margin

    使用绝对定位,然后给 left、right 都设置为 0,然后再设置 margin:0 auto; 即可。

    <div>定宽</div>
    
    div {
      border: 1px solid red;
      position: absolute;
       80px;
      left:0;
      right:0;
      margin:0 auto;
    }
    

    不定宽

    table + margin

    当宽度不固定时,给居中的元素设置 display: table;margin: 0 auto; 即可。

    <div>不定宽块级元素水平居中</div>
    
    div {
      border: 1px solid red;
      margin: 0 auto;
      display: table;
    }
    

    inline-block + text-align

    当有一个或多个块级元素时,给父元素设置 text-align: center;,然后给子元素设置 display: inline-block; 即可。

    <div class="father">
      <div class="son">son1</div>
      <div class="son">son2</div>
    </div>
    
    .father {
      border: 1px solid green;
      text-align: center;
    }
    .son {
      border: 1px solid red;
      display: inline-block;
    }
    

    flex

    只需要给父元素设置 display: flex;justify-content: center; 即可。

    <div class="father">
      <div class="son">son1</div>
      <div class="son">son2</div>
    </div>
    
    .father {
      border: 1px solid green;
      display: flex;
      justify-content: center;
    }
    

    position + transform

    <div>transform实现</div>
    
    div {
      border: 1px solid red;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    
  • 相关阅读:
    linux 校时命令
    vba_按钮
    ASP.NET MVC3快速入门——第一节、概述
    ASP.NET MVC3快速入门——第二节、添加一个控制器
    ASP.NET MVC3快速入门——第三节、添加一个视图
    ASP.NET程序中常用的三十三种代码
    LINQ定义的标准查询操作符
    ADO.NET
    java编程 反射类的使用
    Struts2 源代码学习 (一)
  • 原文地址:https://www.cnblogs.com/LqZww/p/13636096.html
Copyright © 2011-2022 走看看