精华内容
下载资源
问答
  • 水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。一、采用 line-height 属性这种方式很常见,当 line-height 和...

    在前端开发过程中,盒子居中是常常用到的。其中 ,居中又可以分为水平居中和垂直居中。水平居中是比较容易的,直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。

    一、采用 line-height 属性

    这种方式很常见,当 line-height 和 height 两个属性设置相同的高度时,该元素内部的文字将会居中。#parent {

    height: 100px;

    line-height: 100px;

    border: solid 1px #333;}

    优缺点:[优点]设置简单;

    [缺点]只能对一行文字进行垂直居中;

    二、采用 display:table-cell 和 vertical-align:middle

    这种现实方式可以让标签元素以表格单元格的形式呈现,标签就像 table 中的 td,这样一来我们就可以通过vertical-align:middle这个样式使得其内部的元素居中显示。#parent {

    height: 100px;

    display: table-cell;

    vertical-align: middle;

    border: solid 1px #333;}

    优缺点:[优点]设置多行文字居中;

    [缺点]会被其它样式破坏例如:float、position:absolute;

    三、采用 position: absolute 和 margin-top

    通过绝对定位可以给元素设置距父元素上部top:50%,但是还没结束该元素还需要做一定的偏移才行,偏移量为该元素的一半高度margint-top:-height/2。#parent {

    height: 100px;

    position: relative;

    border: solid 1px #333;}#child {

    height: 20px;

    margin-top: -10px;

    position: absolute;

    top: 50%;}

    优缺点:[优点]居中元素对其它同级元素没有影响;

    [缺点]子元素的高度需要固定;

    四、采用 padding-top 和 padding-bottom

    这种方式只需要将顶部和底部的padding设置同样高度就行。#parent {

    padding-top: 20px;

    padding-bottom: 20px;

    border: solid 1px #333;}

    优缺点:[优点]父级元素高度可变;

    [缺点]父级元素高度可变;

    展开全文
  • CSS设置DIV居中

    千次阅读 2015-10-11 21:12:38
    CSS设置DIV居中 body{ text-align:center; } .divs{ margin:0 auto; } CSS设置DIV居中

    CSS设置DIV居中


    <style type="text/css">
    body{
         text-align:center;
    }
    
    .divs{
        margin:0 auto;
    }
    </style>
    
    <body>
         <div class="divs">CSS设置DIV居中</div>
    </body>


    展开全文
  • 块级元素居中 html代码部分<div class="parent"> <div class="child">child</div> </div>行内元素居中 html代码部分<div class="parent"> <span class="child">child</...

    块级元素居中 html代码部分

    <div class="parent">
       <div class="child">child</div>
    </div>

    行内元素居中 html代码部分

    <div class="parent">
       <span class="child">child</span>
    </div>
    

    水平居中

    01 行内元素 text-align: center;

    .parent {
       text-align: center;
    }

    02 块级元素 margin: auto;

    (低版本浏览器还需要设置 text-align: center;)

    .parent {
        text-align: center; 
    }
    .child {
        width: 100px;
        margin: auto; 
        border: 1px solid blue;
    }

    由于本文主要想记录的是垂直居中的方案,这里水平垂直的其他方案就不做过多记录了。

    垂直居中

    01 行内元素(单行文字垂直居中):设置 line-height = height

    .parent {
       height: 200px;
       line-height: 200px;
       border: 1px solid red;
    }

    02 块级元素:绝对定位(需要提前知道尺寸)

    优点:兼容性不错
    缺点:需要提前知道尺寸,margin-top: -(高度的一半); margin-left: -(宽度的一半);
    .parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        background: blue;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -20px;
        margin-left: -40px;
    }

    03 块级元素:绝对定位 + transform

    优点:不需要提前知道尺寸
    缺点:兼容性不好
    .parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: blue;
    }
    

    04 块级元素:绝对定位 + margin: auto;

    优点:不需要提前知道尺寸,兼容性好
    缺点:这个方法是我最喜欢用的一个,要说缺点的话,我目前还不知道。
    .parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: blue;
    }

    05 块级元素:padding

    缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)。
    .parent {
        padding: 5% 0;
    }
    .child {
        padding: 10% 0;
        background: blue;
    }

    06 块级元素:display: table-cell

    .parent {
        width: 600px;
        height: 200px;
        border: 1px solid red;
        display: table;
    }
    .child {
        display: table-cell;
        vertical-align: middle;
    }
    .parent {
        height: 300px;
        border: 1px solid red;
        display: table-cell;
        vertical-align: middle;
        /* *display: block;
        *font-size: (heightX0.873);
        *font-family: arial; */
    }
    同样适用于多行文字的垂直居中处理

    HTML代码:

    <div class="parent">
        <span class="child">child child child child child child child child child child child child child child child child child child child childchild child child </span>
    </div>

    CSS代码:

    .parent {
        width: 400px;
        height: 300px;
        display: table-cell;        
        vertical-align: middle;
        border: 1px solid red;
    }
    .child {
        display: inline-block;
        vertical-align: middle;
        background: blue;
    }

    07 块级元素:display: flex

    缺点:兼容性不好
    .parent {
        width: 600px;
        height: 200px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;  /*水平居中*/
    }
    .child {
        background: blue;
    }

    08 块级元素:伪元素

    .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        text-align: center;
    }
    .child {
        background: blue;
        width: 100px;
        height: 40px;
        display: inline-block;
        vertical-align: middle;
    }
    .parent::before {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;            
    }

    09 块级元素:calc()

    也是个不错的方法。
    缺点:兼容性较差,需要计算。
    .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        position: relative;
    }
    .child {
        width: 100px;
        height: 100px;
        background: blue;
        padding: -webkit-calc((100% - 100px) / 2);
        padding: -moz-calc((100% - 100px) / 2);
        padding: -ms-calc((100% - 100px) / 2);
        padding: calc((100% - 100px) / 2);
        background-clip: content-box;
    }

    10 块级元素:inline-block

    HTML代码:

    <div class="parent">
        <div class="child">child</div>
        <div class="brother">brother</div>
    </div>

    CSS代码:

    .parent {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    .child, .brother {
        display: inline-block;
        vertical-align: middle;
    }
    .child {
        background: blue;
        font-size: 12px;
    }
    .brother {
        height: 400px;
        font-size: 0;
    }
    

    其他

    当然,还有一种方法,就是使用table布局:

    <table>
         <tr>
             <td align="center" valign="middle">content</td> 
         </tr>
     </table>

    因为html还要加table等标签,冗余有点多,而且结构也改变了。

    展开全文
  • css设置图片居中

    2020-04-17 11:36:00
    css设置图片居中 1. 首先要使图片居中的话要保证它为块级元素,(可通过css设置display为:block) 2.然后设置对应元素img的margin为auto,text-align为center 实现css代码如下: img{ display: block; margin: ...

    css设置图片居中

    1. 首先要使图片居中的话要保证它为块级元素,(可通过css设置display为:block)

    2.然后设置对应元素img的margin为auto,text-align为center

    实现css代码如下:

    img{
       display: block;
       margin: auto;
       text-align: center;
    }
    

    好像div 加上align也是可以实现,但建议不要使用,h5推荐语义化div之类的无语义标签可被代替的话尽量少用(个人见解)。

    写的不好请多海涵!!!

    展开全文
  • css让按钮居中的方法:将按钮放在一个div标签中,然后为div设置text-align:center;样式即可使div内按钮居中css使按钮居中的方法示例:/*p,input,button{text-align: center;}*/div{text-align: center;}按钮居中 ...
  • css设置居中

    千次阅读 2019-03-13 20:57:47
    水平垂直居中 vertical-aligh: middle最常见垂直居中方法 前提条件:display:inline-block .out{ width: 300px; height: 300px } .in{ width: 50%; height: 50%; ...
  • CSS设置居中

    2018-11-16 21:00:46
    左右居中 display:flex; flex-direction:row; justify-content:center;   上下居中 display:flex; flex-dirction:column; justify-content:center;
  • css表格文字居中可以使用text-align属性来设置,对表格的table与td标签设置css样式为text-align:center;即可实现表格内文字居中css表格中的文字是如何居中的:在开始我们先介绍个属性,就是这个属性才能使表格在...
  • 0、背景我Windows平台上...因为它支持自定义css,所以,这里想通过设置css来实现图片的居中。1、需求首先要明白编辑器中,Markdown中对图片的处理,加入通过下面的markdown语法插入一张图片:![Test Image](http://w...
  • 记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐。text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微不同的。在讨论这两者的用法之前,我们首先需要了解...
  • css设置垂直居中

    2017-09-03 05:43:02
    css设置垂直居中 元素的垂直居中也是我们日常网页布局中经常会遇到的问题,所以我在此提供一些解决方法,希望可以给予有需要的人一些借鉴和参考. html代码: <div class="parent"> <div class="child">Text...
  • DIV CSS line-height行高上下居中属性教程篇常常使用line-height设置内容(图片、文字)行高上下居中样式效果。一、line-height行高语法 - TOPline-height:22pxdiv{line-height:22px}linet-height样式属性解析图line-...
  • CSS居中设置

    2018-09-23 16:56:44
    /*设置此属性才能水平居中*/ 22 width : 150px ; 23 height : 100px ; 24 background-color : red ; 25 } 26 27 28 29 class= "parent" > 30 class= "child" > ...
  • 利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面...
  • 制作网页列表的分页必不可少,显示的列表条数也不一样,让我们一起来看看如何让分页标签根据给定的分页自动居中呢。 对<ul>标签设置样式为:{ display: table margin:40px auto;} 对<li>标签设置样式...
  • 在一次次笔试,一次次的面试中,问到垂直居中的问题太多太多,但是我每一次回答,都好像都不能让面试官太满意,今天特意花点时间,整理一下css垂直居中问题。1、如果是单行文本。看代码:Document#wrapper{width: ...
  • css float 居中如何设置

    千次阅读 2019-06-01 15:20:46
    float是没有设置居中center的值。一般使用float:left或float:right来实现并排形成居中效果。 通常有靠左、有靠右、有靠中的三列布局,其中最靠左布局设置float:left,最靠右布局设置float:right,当然中间对象盒子...
  • Css元素居中设置

    2015-09-01 17:52:00
    你对DIV CSS居中的方法是否了解,这里和大家...用CSS让元素居中显示并不是件很简单的事情,同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。...
  • css 设置文本垂直居中

    2018-12-21 17:37:00
    css设置文本垂直居中 垂直居中的高必须等于元素的高才能居中 如下图: 代码演示: div{ height:60px; } p{ line-height:60px; /*垂直居中的高必须等于元素的高才能居中*/ } 转载于:...
  • css设置元素居中

    千次阅读 2019-01-19 16:37:09
    方法一:子元素设置margin: 0 auto; 适用场景:子元素宽度已知 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt...
  • 1.行内元素设置水平居中 通过设置父元素text-align:center2.定宽块状元素设置水平居中 通过设置“左右margin”值为“auto”来实现居中的。width:500px;/*定宽*/ margin:0px auto;/* margin-left 与 margin-right...
  • Div居中:margin:auto 0px; 内容居中:text-align:center; 【Java面试题与答案】整理推荐 基础与语法 集合 网络编程 并发编程 Web 安全 设计模式 框架 算法与数据结构 异常 文件解析与生成 Linux ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,135
精华内容 2,454
关键字:

居中css设置