精华内容
下载资源
问答
  • 然后将四个方位的位移值设为0,最后用margin:auto实现垂直水平居中。因为正常情况是margin:top right bottom left顺指针的方向,全设为auto的话就会自动分配,从而实现居中的功能。 <!DOCTYPE html> <...

    水平居中

    • 行内元素

    给父元素设置text-align:center。
    若父元素不是块元素,则给父元素设置display:block即可

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            text-align: center;
        }
    
        .son {
            background-color: red;
        }
    </style>
    <div class='father'>
        <span class="son">
            sssssss
        </span>
    </div>
    

    效果图:
    在这里插入图片描述

    • 块元素
      1、设置margin:0 auto让其行方向自适应分布。
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    效果图:
    在这里插入图片描述
    2、给父元素设置相对定位,子元素设置绝对定位,通过left:50%将子元素的左上角水平居中,然后通过margin-left:-50px(该值为子元素宽度的一半)将其整体水平居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            margin-left: -50px;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    3、同第二条,先给父元素设置相对定位,子元素设置绝对定位,通过left:50%将子元素的左上角水平居中,然后通过transform:translateX(-50%)将其整体水平居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    4、给父元素设置display:flex,采用flex布局的元素相当于一个容器,它的所有子元素自动成为容器成员。

    该容器默认存在两根轴:水平方向的主轴以及垂直方向的交叉轴。

    然后通过justify-content:center将其子元素在主轴方向上居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            justify-content: center;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    垂直居中

    • 行内元素
      给行内元素添加line-hight:200px(该值为父元素的高度)
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    
        .son {
            background-color: red;
            line-height: 200px;
        }
    </style>
    <div class='father'>
        <span class="son">
            sssssss
        </span>
    </div>
    

    效果图:
    在这里插入图片描述

    • 块元素
      1、同水平居中,先给父元素设置相对定位,子元素设置绝对定位,通过top:50%将子元素的左上角垂直居中,然后通过margin-top:-50px(该值为子元素高度的一半)将其整体垂直居中。
    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            margin-top: -50px;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    效果图:
    在这里插入图片描述
    2、同水平居中,先给父元素设置相对定位,子元素设置绝对定位,通过top:50%将子元素的左上角垂直居中,然后通过transform:translateY(-50%)将其整体垂直居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    3、同水平居中,给父元素设置display:flex,采用flex布局的元素相当于一个容器,它的所有子元素自动成为容器成员。

    该容器默认存在两根轴:水平方向的主轴以及垂直方向的交叉轴。

    然后通过align-items:center将其子元素在交叉轴方向上居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            align-items: center;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    垂直水平居中

    1、垂直水平居中理所当然的是将水平居中和垂直居中合起来就行了。
    先给父元素设置相对定位,子元素设置绝对定位,通过top:50%和left:50%将子元素的左上角垂直水平居中,然后通过transform:translate(-50%,-50%)将其整体垂直水平居中(translate中第一个参数即translateX,第二个参数即translateY)。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    效果图:
    在这里插入图片描述
    2、先给父元素设置相对定位,子元素设置绝对定位,通过top:50%和left:50%将子元素的左上角垂直水平居中,然后通过margin-top:-50px(该值为子元素高度的一半)和margin-left:-50px(该值为子元素宽度的一半)将其整体垂直水平居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    3、先给父元素设置相对定位,子元素设置绝对定位,通过top:0,left:0,right:0和bottom:0将子元素的左上角定于父元素的左上角,然后通过margin:auto将其整体垂直水平居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    

    4、给父元素设置display:flex,采用flex布局的元素相当于一个容器,它的所有子元素自动成为容器成员。

    该容器默认存在两根轴:水平方向的主轴以及垂直方向的交叉轴。

    然后通过justify-content:center和align-items:center将其子元素在主轴方向和交叉轴方向上居中。

    <style>
        .father {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class='father'>
        <div class="son">
            sssssss
        </div>
    </div>
    
    展开全文
  • 1.行内元素设置水平居中 通过设置父元素text-align:center2.定宽块状元素设置水平居中 通过设置“左右margin”值为“auto”来实现居中的。width:500px;/*定宽*/ margin:0px auto;/* margin-left 与 margin-right...

    1.行内元素设置水平居中
    通过设置父元素

    text-align:center

    2.定宽块状元素设置水平居中
    通过设置“左右margin”值为“auto”来实现居中的。

    width:500px;/*定宽*/
    margin:0px auto;/* margin-left 与 margin-right 设置为 auto */

    3.不定宽块状元素设置水平居中
    (1)为需要设置的居中的元素外面加入一个 table 标签;这个table的CSS样式设置为“左右 margin”的值为auto

    <tbody><tr><td>
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </td></tr></tbody>
    table{
        margin:0 auto;
    }
    (2)改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    .container{
        text-align:center;
    }
    .container ul{
        list-style:none;
        display:inline;
    }
    .container li{
        margin-right:8px;
        display:inline;
    }

    (3)通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%; 子元素设置 position:relative 和 left:-50% 来实现水平居中。

    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    .container{
        position:relative;
        left:50%
    }
    
    .container ul{
        list-style:none;
        position:relative;
        left:-50%;
    }
    .container li{
        float:left;
        display:inline;
        margin-right:8px;
    }    

    4.父元素高度确定的单行文本垂直居中
    通过设置父元素的 height 和 line-height 高度一致来实现

    <div class="container">
        hi,imooc!
    </div>
    .container{
        height:100px;
        line-height:100px;
    }

    5.父元素高度确定的多行文本垂直居中

    (1)使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle

    <table><tbody><tr><td class="wrap">
        <div>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
        </div>
    </td></tr></tbody></table>
        td 标签默认情况下就默认设置了 vertical-alignmiddle

    (2)设置块级元素的 display 为 table-cell,设置 vertical-align 属性

    <div class="container">
        <div>
            <p>看我是否可以居中。</p>
            <p>看我是否可以居中。</p>
        </div>
    </div>
    .container{
        display:table-cell;/*IE8以上及Chrome、Firefox*/
        vertical-align:middle;/*IE8以上及Chrome、Firefox*/
    }

    以上技巧和代码整理致 imooc

    http://www.imooc.com/learn/9

    展开全文
  • 水平居中 一:行内元素 文本 图片等  在其父元素中设置:text-align:center; 二:块元素  1:定宽块元素  设置:width:固定值。;margin-left:auto;margin-right:auto;    2:不定宽元素  方法1:为需要...

     

    水平居中

    一:行内元素   文本  图片等

           在其父元素中设置:text-align:center;

    二:块元素

          1:定宽块元素

                设置:width:固定值。;margin-left:auto;margin-right:auto;

     

           2:不定宽元素

              方法1:为需要设置为居中的元素外加一个table标签(包括<tbody><tr><td>);为这个table设置 margin-left:auto;margin-right:auto;

              方法2:改变这个块元素为display:inline,然后用text-align:center;来实现居中效果

              方法3:通过给父元素设置float,然后给父元素设置:position:relative 和 left:50%,子元素设置:position:relative和left:-50%;

     

    垂直居中

    一:父元素高度确定的单行文本: 

             设置父元素的height和line-height的高度值来实现

    二:父元素高度确定的多行文本:

           方法1:使用插入table(包括tbody,tr,td标签),同时设置table的vertical-align:middle;(CSS中的垂直居中vertical-align:middle;只有在父元素是td或th时才管用)

           方法2:在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display:table-cell,激活vertical-align属性,但注意,IE6、7并不支持这个样式

     

    一个有趣的现象:元素(无论是什么类型的元素,display:none除外)设置以下2个句之一:

        1:position:absolute

        2:float:left或float:right

       元素会自动变为display:inline-block的方式显示,就可以设置元素的weight和height,且默认宽度不占满父元素

            

    展开全文
  • 水平居中: 一、内联元素: 行内元素的父元素设置 text-align:center; 二、块级元素: 1.定宽块级元素: 设置margin:auto; 2.不定宽块级元素: ⑴加入table标签: 缺点: 利用table标签长度自适应性,即...

    水平居中:

    一、内联元素:

    行内元素的父元素设置 text-align:center;

    二、块级元素:

    1.定宽块级元素:

    设置margin:auto;

    2.不定宽块级元素:

    ⑴加入table标签: 缺点:

    利用table标签长度自适应性,即根据内容长度决定,然后再设置margin值使其居中;                   //增加无意义标签 

    ⑵设置display:inline,使其成为行内元素,然后text-align实现居中; //改变display会缺少一些功能如设置长度

            ⑶设置浮动与相对定位

    父元素float,然后设置position:relative;left:50%;  子元素设置position:relative和left:-50%;实现水平居中

    垂直居中:

    一、父元素高度确定的单行文本

    设置height与line-height值相等 //当内容超过块的宽时,会有内容脱离块

    二、父元素高度确定的多行文本

    1.加入table标签:

    table中的td默认了vertical-align:middle;

    2.设置块级元素的display:table-cell;(设置为表格单元显示),激活vertical-align。(chrome、firefox、ie8以上)//兼容性较差

    展开全文
  • 1.水平居中。 (1)给父元素设置text-align:center;该方法只适合于行内元素。 (2)给自己本身设置margin:0 auto;该方法只适合块级元素。 (3)给父元素设置display:flex;justify-content:center;该方法适合块级...
  • CSS水平居中、垂直居中和水平垂直居中 1.水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:...
  • 0、背景我Windows平台上...因为它支持自定义css,所以,这里想通过设置css来实现图片的居中。1、需求首先要明白编辑器中,Markdown中对图片的处理,加入通过下面的markdown语法插入一张图片:![Test Image](http://w...
  • CSS-水平居中、垂直居中、水平垂直居中 1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:...
  • CSS 实现水平居中与垂直居中 面试时遇到这个问题,当时答得很不全面,有必要做个总结。 一、水平居中的实现 1. 行内元素解决方案 在行内元素的父级 block 元素加上 text-align: center; 即可。 2....
  • CSS实现水平居中

    2018-11-11 14:44:05
    CSS实现水平居中 2.2 如何居中? 2.2.1 行内元素 给其父元素设置 text-align:center,即可实现行内元素水平居中。 2.2.2 块级元素 该元素设置 margin:0 auto 即可。 2.2.3 为了让包含 float:left 属性的子元素水平...
  • CSS 水平居中设置

    千次阅读 2016-01-17 16:17:44
    title: CSS 水平居中设置 date: 2016-1-17 17:20:22 tags: - CSS - Web 前端 comments: truetoc: true1. 行内元素水平居中如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置 text-align:...
  • 面试中遇到的一个问题:如何让css实现水平居中?下面来看一下哪些方法能实现水平居中。 首先分两种情况,行内元素还是块级元素。然而块级元素又分为定宽块状元素和不定款块状元素。先来看下行内元素如何水平居中: ...
  • css水平居中设置

    2016-09-27 01:06:00
    行内元素: div,p{text-align:center;} ...定宽块状元素: 第一宽度固定,第二margin-left和margin-right均是auto。... 来实现水平居中   转载于:https://www.cnblogs.com/qinbb/p/5911317.html
  • CSS设置水平垂直居中

    2018-04-16 16:05:36
    &lt;div style="width: 100%; height:100%;position: fixed;display:flex;justify-content: center;align-items: center;border:1px solid darkgray;"&gt; &...border:1...
  • CSS水平居中设置

    千次阅读 2018-03-21 22:58:23
    行内元素水平居中:行内元素的水平居中是相对于包裹它的块级元素来说的。(理解这句话)方法:给包裹行内元素的前辈块级元素设置text-align:center;1.&lt;label&gt;文字&lt;label&gt;在这里 让...
  • 水平容易,垂直难啊!...3.Flex弹性布局法先顺带记一下水平居中:内联元素水平居中:在父元素上设置 text-align : center;块级元素水平居中:margin : 0 auto;正文:1. 绝对定位+margin:auto法给父元素设置...
  •  我们在实际工作中常会遇到需要设置水平居中的场景,比如为了美观,文章的标题一般都是水平居中显示的。  这里我们又得分两种情况:行内元素 还是 块状元素,块状元素里面又分为定宽块状元素,以及不定宽块状元素...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,925
精华内容 1,170
关键字:

css设置水平居中