精华内容
下载资源
问答
  • 这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素(span、img、a等),直接在其父级元素上...

    在这里插入图片描述

    一、text-align:center;

    这个是没有浮动的情况下,我们可以先将要居中的块级元素设为inline/inline-block,然后在其父元素上加上属性text-align:center;即可。如果要居中的块级元素直接是内联元素(span、img、a等),直接在其父级元素上加上属性text-align:center;即可;

    二、margin:0 auto;

    前提:居中的元素必须是块级元素,如果是内联元素,需要添加属性display:block;而且元素不浮动。

    三、绝对定位+偏移(已知宽高,需计算偏移值);

    .way {
        position: relative;
        width: 250px;
        height: 250px;
    }
    
    .way img {
        width: 200px;
        height: 140px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -70px;
    }
    

    兼容性好; 缺点:必须知道元素的宽高

    四、绝对定位(四个方向都为0)+margin:auto;

    .way4 {
        position: relative;
        width: 250px;
        height: 250px;
    }
    
    .way4 img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
    

    这种方法的好处是不需要知道元素的宽高,而且浏览器的兼容性好。

    五、绝对定位+CSS3属性transform:translate();

    div {
        position: relative;
        width: 250px;
        height: 250px;
    }
    
    div img {
        position: absolute;
        left: 50%;
        top: 50%;
      <!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    

    该方法的优点是不需要知道元素的宽度和高度,在移动端用的比较多,因为移动端对css3新属性的兼容性比较好。 缺点:兼容性不好,只支持IE9+的浏览器

    六、弹性布局display:flex;

    div {
        width: 250px;
        height: 250px;
        display: flex;
        justify-content: center;/*水平居中*/
        align-items: center;/*垂直居中*/
    }
    
    • Flexbox布局最适合应用程序的组件和小规模布局,而 Gird 布局则适用于较大规模的布局。

    • 设为Flex布局以后,子元素的float、clear和vertical-align属性将失效

    • 使用flex居中不需要知道元素本身宽高以及元素的属性

    七、display:table;

    实例:多行文本的垂直居中 主要实现代码:

    • display: table使块状元素成为一个块级表格;
    • display: table-cell;子元素设置成表格单元格;
    • vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
    <div class="table">
        <div class="table-cell">
            近几年随着 jQuery、Ext 以及 CSS3 的发展,以 Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野,可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架,极大丰富了开发素材,也方便了大家的开发。
        </div>
    </div>
    
    .table{
        width: 400px;
        height: 400px;
        padding: 20px;
        border: 1px solid red;
        margin: 40px auto;
        display: table;
    }
    .table-cell{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    

    在这里插入图片描述

    • display:table;此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
    • display:table-cell;table-cell 此元素会作为一个表格单元格显示(类似 和 )

    特别提醒

    • 1.table-cell不感知margin,在父元素上设置table-row等属性,也会使其不感知height。

    • 2.设置float或position会对默认布局造成破坏,可以考虑为之增加一个父div定义float等属性。

    八、Jquery方法实现

    jquery实现水平和垂直剧中的原理是通过jquery设置div的css,获取div的左,上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该div的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div的css设置要在resize()方法中完成,就是每次改变窗口大小是,都要执行设置div的css,代码如下:

     $(function(){
              $(window).resize(function(){
                $('.mydiv').css({
                  position:'absolute',
                  left:($(window).width()-$('.mydiv').outerWidth())/2,
                  top:($(window).height()-$('.mydiv').outerHeight())/2
                });
              });
          })
    

    此方法的好处就是不需要知道div 的具体宽度和高度,直接用jquery就可以实现水平和垂直居中,并且兼容各种浏览器。这个方法在很多的弹出层效果中应用。

    九、绝对定位+calc();(需要知道元素的宽高)

    • 用于动态计算长度值。
    • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
    • 任何长度值都可以使用calc()函数进行计算;
    • calc()函数支持 “+”, “-”, “*”, “/” 运算;
    • calc()函数使用标准的数学运算优先级规则;
    .div {
        position: relative;
        width: 250px;
        height: 250px;
    }
    
    .div img {
        width: 200px;
        height: 140px;
        position: absolute;
        left: calc(50% - 100px);
        top: calc(50% - 70px);
    }
    

    十、Bootstrap前端框架方法居中

    Bootstrap3居中方法

    • 文本居中 class=“text-center”
    • 图片居中 class=“center-block”
    • 其他元素 水平居中 利用bootstrap列偏移
    <div class="col-lg-4 col-offset-4"></div>
    

    Bootstrap4居中

    • class=“m-auto”

    上面的居中方法是使整个元素居中,下面就来介绍下是元素内部居中的方法

    bootstrap3 如何让div内部垂直居中:

    Bootstrap的栅格系统使用的是float:left的浮动方式,vertical-align属性不起作用,故把内部div的float属性清除,添加display属性,如下:

    .middle {
       float: none;
       display: inline-block;
       vertical-align: middle;
    }
    

    Bootstrap4 如何让div内部垂直居中:

    给元素高度

    .login-center {
     height: 100vh;
    }
    

    应用.align-items-center可以使元素垂直居中:

    <divclass="row align-items-center justify-content-center login-center">
    
    </div>
    

    同理,应用justify-content-center可以使元素水平居中。


    此文章是转载于其他博主,如有侵权,请联系删除
    转载来源:https://www.cnblogs.com/hellocd/p/10437651.html

    展开全文
  • HTML元素居中方法

    万次阅读 2018-03-29 18:55:46
    之前我们就总结过很多剧中的方法,但是时间长不用,就会慢慢遗忘,所以我们从头来复习一次,变想边敲代码……文本...只是将子元素里的内联元素居中 如果不是内联元素就要用到 margin: 0 auto;写个简单的代码来理解

    之前我们就总结过很多剧中的方法,但是时间长不用,就会慢慢遗忘,所以我们从头来复习一次,变想边敲代码……

    文本居中

    height + line-height:两者配合使用,垂直方向居中
    text-align:父级的text-align,水平方向居中
    注意:text-align:center ;只是将子元素里的内联元素居中
    如果不是内联元素就要用到 margin: 0 auto;

    写个简单的代码来理解

    <style>
      .word{
        width: 100px;
        height: 30px;
        background: #E5E5E5;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        }
    </style>
    
    <div class="word">
        <p>优秀</p>
    </div>

    运行结果
    优秀这两个字在div中妥妥居中。

    水平居中

    水平居中分两种情况

    one:定宽块元素水平居中
    定宽 + 块元素
    来看看具体的代码

    .wrap{width:200px;
         height:200px;
         border:1px solid red;
         margin:0 auto;} //宽度必须给值
    <div class="wrap"></div>

    two:不定宽块元素水平居中

    1.改变为行内元素,然后使用text-align:center处理,多用于不定项导航的ul的居中

    .nav{text-align:center;}
    .nav ul{display:inline;}
    <div class="nav">
        <ul>
            <li>1111111</li>
            <li>2222222</li>
        </ul>
    </div>

    2.父元素浮动left:50%;
    同时要设置position:relative(给子元素相对定位一个参考)
    子元素相对定位position:relative;left:-50%;

    .wrap{position:relative;
         left:50%;
         float:left;}
    .box{position:relative; 
         left:-50%;}
    <div class="wrap">
        <div class="box">一个子级盒子</div>
    <div>

    垂直居中

    垂直居中也分两种情况
    one:块级元素垂直居中,子元素知道具体宽高
    设置top:50%,这个块元素的最上边为垂直居中的位置,但是这样整体的内容并不是垂直居中,所以要设置margin-top: -2/父宽 px; //为高度的一半
    这样这个块元素又相对于自身最上面向上又移动了自身的50%,因此就垂直居中了。

    .wrap {
      //父元素
    }
    .wrap .content {
      position: absolute;
      width: 100px;
      heigth: 100px;
      top: 50%;
      margin-top: -50px; //为高度的一半
    }

    * two:子元素不知道具体宽高 *

    这种情况有三种方法

    第一种借助table布局;
    第二种是借助translate的transform属性:

    .wrap {
      position: relative;
    }
    .wrap .content {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

    第三种就是用flex布局,非常的简单,代码如下:

    .wrap{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    万能居中方法

    首先移动子元素高度(宽度)的一半:left:50%;(top:50%;)
    再移动父元素高度(宽度)的一半:margin-left:-宽/2;(margin-top:-高/2;)
    前提是必须要知道子元素的宽高

    .wrap{
        width: 200px;
        height: 200px;
        background-color: lightskyblue;
        position: relative;
         }
    .box{
        width: 100px;
        height: 100px;
        background-color: hotpink;
            position: absolute;
        left:50%;
        margin-left: -50px;         
        }
    
    <div class="wrap">
          <div class="box">一个子级盒子</div>
    </div>

    这里写图片描述

    绝对居中

    子元素必须比父元素小,子元素宽高也必须要知道

    .wrap{
        width: 200px;
        height: 200px;
        background-color: lightskyblue;
        position: relative;
         }
    .box{
            width: 100px;
        height: 100px;
        background-color: hotpink;
        position: absolute;
        top: 0;
        right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
            overflow: auto;
     }
    <div class="wrap">
           <div class="box"></div>
    </div>

    这里写图片描述

    可能总结的也不太齐全,会慢慢补全。

    展开全文
  • HTML元素居中显示

    万次阅读 2018-05-11 18:35:25
    HTML中使用元素居中的几种方法,包括水平居中和水平垂直居中

    水平居中

    • 水平居中:给div设置一个宽度,然后添加margin:0 auto属性
     div{
        width:200px;
        margin:0 auto;
      }
    • 让绝对定位的div居中
     div {
        position: absolute;
        width: 300px;
        height: 300px;
        margin: auto;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: bule;
     }

    水平垂直居中

    • 确定容器的宽高 宽500 高 300 的层 设置元素的外边距
     div {
        position: relative;     /* 相对定位或绝对定位均可 */
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left:  -250px;       /* 外边距为自身宽高的一半 */
        //margin:-150px 0 0 -250px; /*一样*/
        background-color: blue; 
      }
    • 未知容器的宽高,利用 transform 属性
     div {
        position: absolute;     /* 相对定位或绝对定位均可 */
        width:500px;
        height:300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: blue;
     }
    • 利用 flex 布局
     .container {
        display: flex;
        align-items: center;        /* 垂直居中 */
        justify-content: center;    /* 水平居中 */
     }
     .container div {
        width: 100px;
        height: 100px;
        background-color: blue; 
     }
    展开全文
  • HTML+css实现元素居中对齐的方法

    千次阅读 2019-07-27 21:41:20
    HTML+css实现元素居中对齐的方法 1.line-height实现居中对齐 此种方法只适用于单行文本的居中,需要知道父元素的高度,通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。 <...

    HTML+css实现元素居中对齐的方法

    1.line-height实现居中对齐

    此种方法只适用于单行文本的居中,需要知道父元素的高度,通过line-height的高度等于父元素的height高度就可以实现垂直居中。以下是单行居中的例子。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.main{
    				width: 500px;
    				height: 200px;
    				background: skyblue;
    			}
    			.main p{
    				text-align: center;/*文字水平居中*/
    				line-height: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<p>我水平方向和垂直方向都居中啦</p>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述
    -------------------------------------------------------------------------------------------------------------------------------------------------分割线
    一下的例子均可以对多行文字进行居中对齐;对齐的的对象不限于文,也可以是两个父子元素进行居中对齐;

    4.使用absolute实行居中对齐

    2.1absolute+margin实现

    该方法需要知道父元素的宽和高,通过margin的的大小撑开一个距离从而实现居中。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.main{
    				position: relative;
    				width: 500px;
    				height: 200px;
    				background: skyblue;
    			}
    			.main .box{
    				position: absolute;
    				width: 200px;
    				height: 50px;
    				left: 50%;
    				top: 50%;
    				margin-top: -25px;
    				margin-left: -100px;
    				background: gray;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<div class="box">
    				使用absolute+margin实现居中
    			</div>
    		</div>
    	</body>
    </html>
    

    效果如下;
    在这里插入图片描述

    2.2通过absolute+transform实现

    未知父元素的高度的情况下,通过给父元素position:relative,再给子元素position:absolute,通过translate即可定位到垂直居中的位置。translate(-50%,-50%)意思是相对自己向左边移动自身宽度一半的距离,向上相对自己向上移动自身高度一半的距离。
    例子:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.main{
    				position: relative;
    				width: 500px;
    				height: 200px;
    				background: skyblue;
    			}
    			.main p{
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				transform: translate(-50%,-50%);
    			}
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<p>transform实现垂直居中</p>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    3.通过display:table-cell实现居中对齐

    1. 给快级父元素加display:table;属性,使得父元素成为块级表格;
    2. 给子元素加display:table-cell;属性,子元素成为列表元素
    3. 在给子元素加vertical-align: middle;使表格内容居中显示,即可实现垂直居中的效果;
      此种方法可以给一大段文字做居中对齐的排版,文字会根据父元素的宽度自动换行,并且不许知道父元素的宽和高。
      例子如下;
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.main{
    				width: 500px;
    				height: 200px;
    				background: skyblue;
    				display: table;
    			}
    			.main p{
    				display: table-cell;
    				vertical-align: middle;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<p>给父元素加display:table;给子元素加display:table-cell;给子元素加vertical-align:middle</p>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述

    4.通过flex布局实现居中对齐

    父元素使用flex布局,并定义两个属性值justify-content,align-items都为center,那么就定义为水平垂直居中
    justify-content属性定义了项目在主轴上的对齐方式。align-items属性定义项目在交叉轴上如何对齐。
    这种方法不需要知道父元素放的宽高。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.main{
    				width: 500px;
    				height: 200px;
    				background: skyblue;
    				display: flex;
    				justify-content: center;  /*水平居中对齐*/
    				align-items: center;  /*垂直居中对齐*/
    			}
    			.item{
    				width: 200px;
    				height: 30px;
    				background: gray;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<div class="item"></div>
    		</div>
    	</body>
    </html>
    

    在这里插入图片描述
    父元素使用flex布局,并且加上justify-content: center;属性,子元素使用margin 0 auto;同样可以实现居中对齐。

    展开全文
  • 对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中,对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法,下面先给大家分享一下三种方法,希望能帮助...
  • HTML元素的五大居中方法

    千次阅读 多人点赞 2019-08-20 10:43:30
    分享几个我所了解的居中方法,欢迎大家来补充… ... //已知元素的宽高,给 #box 元素设置上下 margin 为 50px(50px可以为任何像素也可以不写,默认为 0) 左右auto自动居中,这样父元素 #box 在body里面就左右居中...
  • 主要介绍了html元素 水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下
  • Html5-CSS之元素的五大居中方式

    千次阅读 多人点赞 2019-10-26 15:12:51
    你是不是也对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?恭喜你,搜到这篇博客! 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码...
  • html元素水平居中的几种方法

    万次阅读 2016-08-14 00:45:39
    <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. ... css的水平居中
  • 前端---HTML怎么让元素居中

    千次阅读 2018-09-27 16:57:35
    子div在父div内居中的方法 需要JavaScript的来取div的尺寸再...所以给和我一样蠢的小白分享一下让元素居中的简单方法(如果这样的人存在的话): 在元素的style属性值里写上下边的语句 文字居中:text-align:cent...
  • 表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行。 但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网、活动展示网等等的时候。 问题: 实现div垂直居中并在缩放浏览器尺寸...
  • HTML:块元素位置居中

    2019-10-03 03:45:40
    一种是有两个块元素,其中一个块元素相对另外一个块元素居中; 另外一种是一个块元素相对于顶级父容器居中 第一种实现方式如下: <html> <head> <meta charset="utf-8" /> <...
  • 行内元素和块级元素居中方法 我也是初学者,希望大家可以一起分享一下学习经验,下面这些居中方法也是我前几天了解到的,很多种居中的方法。 ^ ^ htmlcss ** 行内元素居中 ** 这个方法就是通过text-align:center设置...
  • 页面元素居中的几种方法

    千次阅读 2014-09-05 15:49:24
    做页面布局时,经常会需要将一些页面元素居中显示。当然,你可以设定元素的top、left来使它居中,但是,当父容器的大小发生变化,你不得不修改子元素的top、left来使它保持居中;当用户的显示器分辨率与你的测试机...
  • HTML - 内联元素居中和块级元素居中

    千次阅读 2018-08-04 00:06:36
    text-align:'center' 这是针对内联元素的,而margin:0 auto 则是针对块级元素居中方式。而且它们的使用对象不一样。 我们看一下如下代码: &lt;div style='text-align:center;width:500px;height:500px;...
  • 一个子元素如何在父元素居中?实现如图的样子 1、行内元素 如果子元素是行内元素,就可以用这种方法。父元素text-align:center,子元素设置行高line-height:父元素的高。 <!DOCTYPE html> <html lang=...
  • 主要针对HTML对于元素水平垂直居中进行的探讨,对元素水平垂直居中操作进行讲解,感兴趣的小伙伴们可以参考一下
  • Html页面body里的元素居中方法

    千次阅读 2020-05-25 14:14:20
    在写H5页面时,经常遇到把body里的元素居中的要求,每次都需要现查,现在整理出来。如下: body { max-width:660px; margin: 0 auto; } ps:max-width参数,根据自己的实际需要调整大小。 ...
  • html元素居中方案

    万次阅读 2013-09-30 10:24:44
    居中问题,就不得不提到块级元素和行内元素HTML中的所有标记都分为块级元素和行内...1. 标签是html的块元素,将后面的文本和图像居中显示。它仅针对于IE浏览器,并且在IE中不同版本的支持情况不一样,所以其用法简
  • 复制代码代码如下: ”demo”> <ul> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> <li><a>我居中了</a></li> </ul> </div> 当做的是水平导航条时,有以下...
  • DIV中元素居中的方式

    千次阅读 多人点赞 2020-08-15 22:10:37
    div中常用的元素居中方法
  • 1、内联元素在父元素居中显示 • 情境①:父元素未设置尺寸 • 情境②:父元素已设置宽高 2、块级元素在父元素居中显示 • 情境①:父元素及该元素都未设置尺寸 • 情境②:父元素未设置尺寸,但该元素已...
  • 有很多的业务需要元素或者文字如果单行,居中显示,如果数据增多,居中显示代码(直接复制到编辑器可用):&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
  • 直奔主题在这里提供三种块级元素垂直水平居中的方法 flex(子级宽高可固定也可不固定,随意) 定位+margin(固定子级的宽高,margin-top,margin-left取自身一半的负值) 定位+transform(不固定子级的宽高) flex...
  • 元素居中对齐 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>元素居中对齐</title> <style> </style> </head> <body> 实现...
  • 如何让元素在父元素中水平或垂直居中 行内 text-align:center; line-height:height; 块级 1.给父元素设置 display;flex align-items:center; justify-content:center; 2.给父元素一个定位属性,子元素使用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 96,416
精华内容 38,566
关键字:

html元素居中