精华内容
参与话题
问答
  • css居中的几种方式总结

    千次阅读 2018-07-18 10:48:13
    1.水平居中的margin:0 auto; 设置块元素(或与之类似的元素)的居中。 注意:margin:0 auto;的选择器是作用对象(子元素),如div,p,而不是body。且不受float影响(设置display: block)。 2.水平居中text-align:...

    1.水平居中的margin:0 auto;

    设置块元素(或与之类似的元素)的居中。
    注意:margin:0 auto;的选择器是作用对象(子元素),如div,p,而不是body。且不受float影响(设置display: block)。

    2.水平居中text-align:center;

    3.水平垂直居中:

    (1)定位和需要定位的元素的margin减去宽高的一半

    img{
                width: 100px;
                height: 150px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -75px;
                margin-left: -50px;
            }

    (2)定位和margin:auto;

    auto设置左右边距为来使其水平居中。元素会占据你所指定的宽度,然后剩余的宽度会一分为二成为左右外边距

    img{
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }

    (3)绝对定位和transfrom

    transform:translate(-50%,-50%):向上(X轴)向左(Y轴)移动自身长宽的50%,使其位于中心。同理,需要按比例移动元素的话修改translate的值就可以做到。
    注意:需要居中的元素应为绝对定位(position: absolute;)

    img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }

    (4)display:table-cell
    把其变成表格样式,再利用表格的样式来进行居中,很方便

    .box{
                width: 300px;
                height: 300px;
                background:#e9dfc7; 
                border:1px solid red;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
            }

    (5)flexBox(伸缩容器)居中
    用了CSS3新特性flex,非常方便快捷,在移动端使用完美,pc端有兼容性问题(只有谷歌和火狐支持)

    .container{
               display:flex;
               flex-flow:row;
               }
    .main{
            width:60%;
             }
    .left{
           flex:1;
            }
    right{
            flex:2;
             }

    最后附加一个总结对比比较详细的博客链接:https://blog.csdn.net/freshlover/article/details/11579669

    展开全文
  • CSS的布局与居中

    千次阅读 2018-09-13 12:03:45
    1.左右布局 给两个div添加 float: left;属性 <body> <div style="border:5px solid red;float:left"> 第一个div</div> &.../div&

    1.左右布局

    1. 给两个div添加 float: left;属性
      <body>
        <div style="border:5px solid red;float:left"> 第一个div</div>
        <div style="border:5px solid pink;float:left">第二个div</div>
      </body>

    效果

    这里写图片描述
    设置一个左浮动,一个右浮动

      <body>
        <div style="border:5px solid red;;float:left"> 第一个div</div>
        <div style="border:5px solid pink;;float:right">第二个div</div>
      </body>

    效果
    这里写图片描述

    2.给两个div添加display:inline属性

      <body>
        <div style="border:5px solid red;;display:inline"> 第一个div</div>
        <div style="border:5px solid pink;;display:inline">第二个div</div>
      </body>

    效果
    这里写图片描述

    2.左中右布局

    1.使用float

    • 两边固定宽度,中间宽度自适应
    • 利用中间元素的margin值控制两边的间距
    • 宽度小于左右部分宽度之和时,右侧部分会被挤下去
    <style>
        .left {width: 200px; height: 50px; float: left; background: red;}
        .right {width: 150px; height: 50px; float: right; background: blue;}
        .middle {margin-left: 210px;height: 50px; background:pink; margin-right:160px;}
    </style>
    <body>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    <body/>

    效果
    这里写图片描述

    2.使用position绝对定位

    • 缺点:有顶部对齐问题,需要进行调整,注意中间的高度为整个内容的高度
    <style>
        .left {width: 200px; height: 100px; position: absolute; top: 0; left: 0; background:red;}
        .right {width: 150px; height: 100px; position: absolute; top:0; right: 0; background: blue;}
        .middle {margin: 0 160px 0 210px; height: 100px;  background: pink;}
    </style>
    <body>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="middle">中间</div>
    <body/>

    效果
    这里写图片描述

    3.使用flex

    • 仅需将父元素设置为display:flex;,盒内元素两端对其,将中间元素设置为100%宽度即可填充空白,再利用margin值设置边距即可
    • 并且盒内元素的高度撑开容器的高度
    <style>
        .wrap {display: flex;}
        .left, .right, .middle {height: 100px;}
        .left {width: 200px; background: red;}
        .right {width: 150px; background: blue;}
        .middle {background: pink; width: 100%; margin: 0 40px;}
    </style>
    <body>
    <div class="wrap">
        <div class="left">左侧</div>
        <div class="middle">中间</div>
        <div class="right">右侧</div>
    </div>
    </dody>

    效果
    这里写图片描述

    3.水平居中

    • 常用行内元素为a/img/input/span 等,标签内的HTML文本也属于此类。对于此类情况,水平居中是通过给父元素设置 text-align:center来实现的
    <body>
      <div style="text-align:center;">
        Hello World
      </div>
    </body>
    • 常用块级元素为div/table/ul/dl/form/h1/p等,根据应用场景不同又分为定宽块级与不定宽块级两种情况,分别讨论。

    1.定宽块级元素

    • 满足定宽块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
    <style>
      div{
        width:500px;/*定宽*/
        margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
      }
    </style>
    <body>
      <div>
        Hello World
      </div>
    </body>

    2.不定宽块级元素

    • 我们经常会遇到不定宽度块级元素的使用,如分页导航,因为分页的数目不定,所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式
    • 加入 table 标签
    • 设置 display;inline 方法
    • 设置 position:relativeleft:50%;

    1.加入 table 标签

    • 第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )
    • 第二步:为这个 table 设置“左右 margin:auto
    <style>
      table{
        margin:0 auto;
      }
      ul{list-style:none;margin:0;padding:0;}
      li{float:left;display:inline;margin-right:8px;}
      </style>
    
    <div>
      <table>
        <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>
    </div>
    • 这种方法的缺点是增加了无语义的HTML标签,增加了嵌套深度

    2.设置 display:inline 方法

    • 改变块级元素的 dispalyinline 类型,然后使用 text-align:center 来实现居中效果
    <style>
      .container{
        text-align:center;
      }
      .container ul{
        list-style:none;
        margin:0;
        padding:0;
        display:inline;
      }
      .container li{
        margin-right:8px;
        display:inline;
      }
    </style>
    <body>
      <div class="container">
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </div>
    </body>
    • 这种方法的缺点是将块级元素的display设置为inline,于是少了很多功能,比如盒子模型

    3.设置 position:relativeleft:50%;

    • 通过给父元素设置 float,然后给父元素设置 position:relativeleft:50%,给子元素设置 position:relativeleft:-50% 来实现水平居中。
    <style>
      .container{
        float:left;
        position:relative;
        left:50%
      }
      .container ul{
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:-50%;
      }
      .container li{float:left;display:inline;margin-right:8px;}
    </style>
    <body>
      <div class="container">
        <ul>
          <li><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
        </ul>
      </div>
    </body>
    • 这种方法可以保留块状元素仍以 display:block 的形式显示,优点不添加无语议表标签,不增加嵌套深度,但它的缺点是设置了 position:relative,带来了一定的副作用。

    4.垂直居中

    1.常规元素的垂直居中

    • 容器内元素display:inline/inline-block
    • 这种情况就比较容易了,直接设置容器的text-align就可以实现内容元素的水平居中,设置垂直居中的话要设置容器的高度,然后设置容易的line-height==height就可以,如下:
    <style>  
      .container{
        text-align: center;
        height: 50px;
        line-height: 50px;
      }
    </style>
    
     <div class="container">
         <span>我要居中</span>
     </div>

    2.容器内元素display:block且元素宽高已知

    • 这种情况下我们使用position这个属性结合设置偏移来实现。
    • 首先设置容器的position:relative,设置元素positionabsolute
    • 然后设置元素的偏移top,left,margin-top,margin-left,其中top,left设置为50%,而margin-top/margin-left的偏移量均为本身元素高/宽的一半,为负值。
    <style> 
        container {
            height: 200px;
            width: 200px;
            background: pink;
            position: relative;
        }
        inner-box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
            height: 100px;
            width: 100px;
            background: green;
        }
      </style>
    
    <div class="container">
            <div class="inner-box"></div>
        </div>

    3.容器内元素display:block,且元素宽高未知

    • 这种方法与方法二类似,但是不同的是不能通过设置margin-top/left偏移来达到效果了,因为容器内元素的宽高是未知的。这次通过设置left/top/bottom/right:0,然后设置margin:auto
    <style> 
        .container {
                height: 200px;
                width: 200px;
                background: pink;
                position: relative;
            }
    
        .inner-box {
            position: absolute;
            height: 100px;
            width: 100px;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            margin: auto;
            background: green;
        }
      </style>
    
    <div class="container">
            <div class="inner-box"></div>
        </div>

    小技巧

    • 子元素加了浮动,务必在该父元素上加上 clearfix
    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    • 可以使用nth-child(##)来选中特定元素
    • 合理使用margin的负值
    • 合理使用max-width属性
    • 给标签加上border:1px solid red;便于调试
    • 如果子元素的宽度为100%,那么就是父元素的宽度
    • 加了display:inline-block;务必加vertical-align:top
    • 熟悉各种工具的使用
      -
    展开全文
  • css图片居中

    千次阅读 2019-03-27 16:03:11
    css图片居中 <div class="main_view"> <img src="/static/images/loading.gif"></div> </div> .main_view { text-align: center; display: table-cell; vertical-align: middle; ...

    css图片居中

    <div class="main_view">
        <img src="/static/images/loading.gif"></div>
    </div>
    
    .main_view {
    	text-align: center;
    	display: table-cell;
    	vertical-align: middle;
    	width: 100vw;
    	height: 100vh;
    	background-color: #fff;	
    }
    
    img {
    	max-width: 60px;
    	max-height: 60px;
    }
    
    展开全文
  • css居中问题

    万次阅读 2018-08-27 09:13:10
    居中布局 一、水平居中(子元素) 【1】.常规元素设置水平居中: 《1》行内元素、不定宽块级元素:设置父元素 text-align:center 《2》图片水平居中:设置img clear+display+margin 《3》定宽块级元素:...

    居中布局

    一、水平居中(子元素)

    【1】.常规元素设置水平居中:

    《1》行内元素、不定宽块级元素:设置父元素 text-align:center

    《2》图片水平居中:设置img  clear+display+margin

    《3》定宽块级元素:设置子元素: margin:0 auto;

    《4》通用方法(不管行/块级元素): 

    设置父元素 display:flex; justify-content(水平对齐方式):center;

    【2】浮动元素水平居中(position:relative)

    《1》定宽浮动元素:设置浮动元素本身   position : relative;left:50%;margin-left:-(width/2);

    《2》不定宽元素:父float+父relative+子relative+子 left:-50% 或 right:50%

    浮动元素的left为%时,是 设置以包含元素的百分比计的左边位置。可使用负值。

    所以下例中父元素(红框)被body包含的,则父元素左边缘距整个页面左边缘50%,即父元素左边缘在页面中轴线上;

    子元素(蓝框)再超出父元素50%,设置left:-50% 或者 right:50%

    效果:

    《3》通用(不管定宽还是不定宽): 父元素设置:display:flex; justify-content:center;

    【3】绝对定位元素的水平居中(position:absolute)

    《1》定宽元素:

    方法1:父(红框):relative  子(蓝框):left:50%   margin-left:-(width/2)  

    方法2:父(红框):relative   子(蓝框):left:0   righ:0    margin :0  auto

    效果:

    由于absolute是相对最近的定位父元素,会脱离文档流,而例中父元素relative不会脱离文档流,所以父元素不会被子元素撑开,从而父元素高度为0。

    《2》不定宽元素:父:relative   子:left:50% +translateX(-50%)

    与定宽元素中子元素设置 margin-left:-(width/2)相似

    《3》通用(不管是否定宽),设置父元素   display:flex; justify-content:center;

     

    二、垂直居中(垂直居中,默认外部元素(这里称为父元素)是有高度的

    【1】常规元素的垂直居中

    《1》行内元素,设置 子元素 line-height=父元素height 

    效果:

    《2》通用(行/块/图片) 设置父:dispaly:table-cell + vertical-align:middle   

                                            或者父: display:flex    +     align-items(垂直方向的对齐):center

     

    【2】浮动元素(子元素)垂直居中:

    《1》定高的元素:@#¥%……&*(*……%¥

    方式一:父relative + absolute + line-height=height + top0/bottom0+ margin:auto

    方式二:父relative + absolute + line-height=height + top50% + margin-top-height/2

    注意:浮动子元素的父元素需要设置高度不小于子元素高度。

    效果:

    《2》通用:父元素  display:flex; align-items:center;

     

    【3】绝对定位的垂直居中

    绝对定位元素相当于inline-block:没有行和块之分,只有定高和不定高之分。

    《1》利用绝对定位自身:子元素top:50% + translateY:-50% +父 relative

    《2》通用: 父元素 display: flex; align-items: center;

     

    三、水平垂直居中

    【1】常规元素

    《1》table通用(一列或多列)

    父元素设置   display: table-cell + vertical-alignmiddle + text-aligncenter

    《2》flex通用(见末尾)

    【2】浮动元素

           flex通用(见末尾)

    【3】绝对定位元素

    《1》利用绝对定位来水平垂直居中:

    《2》flex通用见末尾

    【4】水平垂直通用(常规/浮动/绝对定位): flex

    父元素 display:flex; justify-content:center; aligns-item:center;

     

     

     

     

     

     

     

     

     

     

    展开全文
  • css居中的几种方式

    千次阅读 2019-03-08 09:41:58
    水平居中 1.定宽块级元素 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 <style> div{ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置...
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2012-05-30 09:56:06
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • CSS样式居中总结

    千次阅读 2019-06-12 17:56:08
    CSS的样式居中总结 一、父容器宽度确定时水平居中 (1)通过margin: 0 auto; text-align: center实现CSS水平居中。 这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过...
  • 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
  • 6种方法实现css布局水平居中

    千次阅读 2019-07-02 10:58:05
    说到常见css布局,面试时经常也会考考大家,看对css知识掌握的咋样,对css盒模型理解没,比如会问css布局水平居中的方法或者css布局垂直居中的方法等,今天分享常见css布局水平居中的6种方法。 方法一:margin + ...
  • CSS居中

    2018-08-23 15:20:39
    1.多行文本居中 line-height:一般是偶数,所设字体也是偶数 多行文本居中时,需要padding   .line{  height:50px;  line-height:20px;  font-size:14px;  padding-top:10px;  }  ...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...
  • css居中方式大全

    2019-04-15 17:01:42
    不定宽默认居中显示 display:inline position:relative; left:50%; 定宽定高:{position:absolute; transform:translate(50%)} 行内 块级 text-align:center flex布局 position:relative; tran...
  • 15种CSS居中的方式

    万次阅读 2018-03-30 17:32:49
    转载:【基础】这15种CSS居中的方式,你都用过哪几种? 简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中...
  • CSS居中小结

    千次阅读 2015-07-27 14:01:10
    今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中,最简单的办法当然就是margin:0 auto;也就是将margin-left和margin-right属性设置为auto,从而达到水平居中的效果。那么其他的办法呢?容我一一道来:line-...
  • CSS居中的方式

    千次阅读 2018-05-28 11:55:59
    1、内联元素水平居中 2、块级元素水平居中 3、多块级元素水平居中(利用inline-block) 4、多块级元素水平居中(利用display: flex) 5、垂直居中(单行内联(line-height)元素垂直居中) 6、垂直居中(多行...
  • html + css 居中方法大全

    千次阅读 2017-11-17 16:21:53
    html + css 元素居中方法大全
  • css居中的8种方法

    2020-08-19 16:53:44
    CSS实现垂直居中的几种方法 垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。 ...
  • css居中对齐的几种方法

    千次阅读 2018-09-27 21:52:45
    css居中对齐的几种方法弹性盒子position:absolutefixed+margin:auto弹性盒子与其他传统的对比: 弹性盒子 设置弹性容器的 主轴对齐属性:justify-content:center 交叉轴的对其属性:align-items:center .perent{ ...
  • 前几天自己用css居中的效果 margin: 0 auto,平时我都事这样来写的,不过这次就是不能实现居中的效果,检查代码,原来是自己没有添加DTD语句,即:!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN...
  • 前段时间听学长讲他面试的经历,他提到了我最关心的——面试题。其中有一道是写出居中的十种方法,不禁反问自己“能否写出?”......希望以下文章可以帮到需要的小可爱们。
  • css居中方式总结,用xmind软件画的流程图,然后转为pdf,
  • css居中那些事

    2016-04-01 10:02:20
    目录 margin: 0 auto text-algin: center; position:absolute + margin负值 position:absolute + translate偏移 position:absolute ...CSS margin 属性 设置 p 元素的 4 个外边距:margin:5px
  • CSS居中对齐

    2014-05-05 14:07:07
    一、文本居中 利用下面的html代码演示文本居中,也可以到这里在线研究。 [html] view plaincopy div class="outerBox"> center text div>  1.text-align实现文字水平居中 对div.outerBox设置...
  • HTML与CSS居中对齐的方式大全 第一种方式 [css] : .parent{ width: 300px; height: 300px; background: #ddd; /*display: table;*/ display: table-cell; vertical-align: middle; text-align: ...
  • css居中弹出层 随滚动条居中

    千次阅读 2013-12-27 00:06:20
    本文只对css新手普及基本知识,高手飘过。 另,本文只说明弹出层如何固定居中在屏幕正中,并且随滚动条移动始终居中。 弹出、关闭事件简单,请自行解决。 下面开始正文,请先看图,如何让一个宽度 400px的弹出...
  • css居中,进度条

    2017-09-23 14:03:53
    html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .container{ position: fixed; left:0; top:0; width:100%;
  • 深入理解CSS居中问题

    2018-12-23 15:54:14
    关于如何在div中居中一个元素,应该是一个前段开发者在前前期常遇到的问题,下面我总结了一下我知道的和大家分享,当然,如果写...text/css"&gt; div{ width:600px; height: 100px; background-...
  • CSS居中方案大全

    2018-10-11 01:24:55
    CSS居中方案大全
  • css居中的常用方法

    2019-06-12 13:47:12
    css居中的常用方法 相信很多程序员都对居中样式不陌生,特别是前端人员,估计天天调整样式。而居中样式是非常常见且重要的。 时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,利用css来实现对象的...
  • CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧。...

空空如也

1 2 3 4 5 ... 20
收藏数 105,364
精华内容 42,145
关键字:

css 居中