精华内容
下载资源
问答
  • 原始代码: center.html: <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
  • 主要为大家详细介绍了bootstrap 模态框modal实现水平垂直居中显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) ※ flex-direction:row-reverse (与row 相反)  ※ flex-direction:column (从上往下排列==顶对齐) ...
  • Horizontal vertical alignment水平垂直居中的实现方式
  • js实现水平垂直居中

    2017-03-23 16:28:06
    js实现水平垂直居中,纯js,兼容性好
  • 主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了CSS定位“十字架”之水平垂直居中的相关资料,CSS如何定位“十字架”实现水平垂直居中效果,小编为大家解答,感兴趣的小伙伴们可以参考一下
  • 主要给大家介绍了css实现元素水平垂直居中的两种方式,文中给出了完整的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,有需要的朋友们下面来一起看看吧。
  • 在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的,这里使用绝对定位+负外边距的方式来实现垂直居中,需要的朋友可以参考下
  • 最终实现效果为实现行内元素的水平垂直居中对齐,效果图如下:   接下来为实现代码: 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-...
  • div框水平垂直居中跟内容垂直居中
  • 有时需要产品图片水平垂直居中显示,这种展示用CSS来实现又是比较棘手的一件事,我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中,实现也是相当的方便,唯一...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...

        前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。

    一、水平居中:

        (1)行内元素的水平居中

                如果被设置的元素为文本、图片等行内元素时,在父元素中设置text-align:center实现行内元素水平居中,将子元素的设置为display:inline-block,使子元素变成行内元素;

    <div class="parent" style="background-color: gray;">
        <div class="child" style="background-color: light-blue;">demo</div>
    </div>
    <style>
    .parent {
        text-align: center;
    }
    .child {
        display: inline-block;
    }
    </style>

        (2)块状元素的水平居中(定宽)

            当被设置元素为定宽块级元素时用text-align:center;就不起作用了。可以通过设置“margin: 0 auto;”来实现居中的。

    <div class="parent" style="background-color: gray;">
        <div class="child" style="background-color: lightblue;">demo</div>
    </div>
    .child {
        width: 200px;
        margin: 0 auto;
    }

        (3)块状元素的水平居中(不定定宽)

            在实际工作中,我们会遇到需要为“不定宽度的块级元素”设置居中,如网页上的分页导航,因为分页的数量是不确定的,所以,不能通过设置宽度来限制它的弹性。

           可以直接给补丁款的块级元素设置text-align:center;来实现,也可以给父元素加text-align:center;来实现居中效果。

          当不定宽块级元素的宽度不要占一行时,可以设置display为inline类型或inline-block(设置为行内元素显示或行内块元素)。

    <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;
        background: beige;
    }
    .container ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    .container li {
        margin-right: 8px;
        display: inline-block;
    }

    二、垂直居中

          和水平居中一样,垂直居中,首先需设定两个条件即父元素是盒子容器且高度已经设定。

        (1)子元素是行内元素,高度是由其内容撑开的。

                这种情况下,需要通过设定父元素的line-height为其高度来使得子元素垂直居中。

    <div class="wrap line-height">
        <span class="span">111111</span>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        line-height: 300px;
        border: 2px solid #ccc;
    }
    .span {
        background: red;
    }

      

        (2)子元素是块级元素但子元素高度没有设定,在这种情况下,实际上是不知道子元素的高度的,无法通过计算得到padding或margin来调整。

           可以通过给父元素设定display:table-cell;vertical-align:middle;来解决。

    <div class="wrap">
        <div class="non-height">111111</div>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        border: 2px solid #ccc;
        display: table-cell;
        vertical-align: middle;
    }
    .non-height {
        background: green;
    }
    

        (3)子元素是块级元素且高度已经设定

            计算子元素的margin-top或margin-bottom,计算方法为父(元素高度-子元素高度)/ 2;

    <div class="wrap">
        <div class="div1">111111</div>
    </div>
    .wrap {
        width: 200px;
        height: 300px;
        border: 2px solid #ccc;
    }
    .div1 {
        width: 100px;
        height: 100px;
        margin-top: 100px;
        background: darkblue;
    }

    三、水平垂直居中

        (1)水平对齐+行高

                text-align + line-height实现单行文本水平垂直居中

    <style>
        .test {
            text-align: center;
            line-height: 100px;
    }
    </style>
    <div class="test" style="background-color: lightblue;width: 200px;"></div>

        (2)水平+垂直对齐

            ①text-align + vertical-align 在父元素设置text-align和vertical-align,并将父元素设置为table-cell元素,子元素设置为inline-block元素。

    <style>
    .parent {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .child {
        display: inline-block;
    }
    </style>
    <div class="parent" style="background-color: gray; width: 200px; height:100px;>
        <div class="child" style="background-color: lightblue;">测试文字</div>
    </div>

            ②若子元素是图像,可不使用table-cell,而是其父元素用行高代替高度,且字体大小设为0。子元素本身设置vertical-align:middle;

    <style>
    .parent {
        text-align: center;
        line-height: 100px;
        font-size: 0;
    }
    .child {
        vertical-align: middle;
    }
    </style>
    <div class="parent" style="background-color: gray; width: 200px;">
        <img class="child" src="images/1.png" width="50%" alt="test">
    </div>

        (3)相对+绝对定位

            使用absolute,利用绝对定位元素的盒模型特性,在偏移属性为确定值的基础上,设置margin: auto;

    <style>
    .parent {
        position: relative;
    }
    .child {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 80px;
        margin: auto;
    }
    </style>
    <div class="parent" style="background-color: lightgray;width: 200px; height: 100px;>
        <div class="child" style="background-color: lightblue;">测试文字</div>
    </div>

    PS:01、补充《三》中的水平垂直居中的方式(2018/08/29)

         translate()函数可以在不知道自身宽高的情况下,利用它进行水平垂直居中。但是,有兼容性问题,支持IE9+的游览器。

    使用translate函数,配合left,top属性,可以让目标元素始终保持水平垂直居中,当游览器窗口发生变化时,也能一直保持水平垂直居中。

    <div class="wrap">
       不知道宽高,可以水平垂直居中
    </div>
    .wrap {
        padding: 10px;
        background: green;
        color: #fff;
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;  /*定位margin-left:50%的位置*/
        -webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/
        -moz-transform: translate(-50%,-50%);  /*IE9+*/
        transform: translate(-50%,-50%); /*使元素本身向左移动宽度的一半*/
        /*transform使元素在当前位置分别往x轴,y轴正向平移自身宽度的一半距离。*/
    }

    02、补充《三》中的水平垂直居中的方式(2018/11/29)

           场景:使用背景图片属性,使图片在父元素的盒子中始终居中,但是,背景图片的尺寸大小不固定。

          关键:background-position:center center;(background-position:50% 50%;)属性。

    <div class="index-imgBlock">
        <div class="index-image"></div>
    </div>
    .index-image {
        height: 268px;/*选取三张图片中最大高度的尺寸设定*/
        width: 100%;
        max-width: 484px; /*选取三张图片中的最大宽度的尺寸设定*/
        background: url(images/403.png);       /*403图片尺寸为484*206*/
        /*background: url(images/404.png);*/   /*403图片尺寸为428*268*/
        /*background: url(images/500.png);*/   /*500图片尺寸为475*236*/
        background-position: center center;
        border: 1px solid #333333;
    }

     

    background-position属性默认值为0% 0%,即背景图像的左上角与对象背景区域的左上角对齐。使用background-position:center center;/background-position:50% 50%;这样就可以使背景图像的中心,与背景区域的中心对齐,即背景图像位于对象的中央位置。

    参考博客:CSS布局(六)对齐方式  点击打开链接  http://www.cnblogs.com/chaixiaozhi/p/8490725.html 

     版权声明:本文为博主原创文章,未经博主允许不得转载。
                  
     

     

     

    展开全文
  • 原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习; <div class="container"> <div class="item">1</div> <div class=...

    原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习;
    在这里插入图片描述

    <div class="container">              
          <div class="item">1</div>
          <div class="item">2</div>
          <div class="item">3</div>
          <div class="item">4</div>
          <div class="item">5</div>
          <div class="item">6</div>
          <div class="item">7</div>
          <div class="item">8</div>
    </div>
    
       .container {
            display: grid;
            /* grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。 */
            grid-template-columns: repeat(4, 60px);
            grid-template-rows: repeat(2, 60px);
            /* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式, 
            grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)
            我设置的是10 行与行之间 列与列之间 都是10*/
            grid-gap: 10px;
             /* item在这个单元格中的位置justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下) */
            align-items: center;
            justify-items: center;  
            /* justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。 */
            justify-content: center;
            align-content: center;
    
            width: 100%;
            height: 500px;
            background: #f3f3f3;
        }
        .item {
            width: 30px;
            height: 30px;
            display: grid;
            border: 1px solid red;
            justify-content: center;
            align-content: center;
        }
    
    1. 关于 justify-content: center; align-content: center; justify-content是控制整个内容区域在container中的位置的

    2. align-items: center; justify-items: center;简单来说-items是控制单个单元格的位置的

      这是未设置任何center的状态在发这里插入图片描述
      这是设置了 justify-content: center; align-content: center;
      可以看到整体居中了 但是每个div在自己所在的单元格内还是处在左上角的位置的
      在这里插入图片描述
      这里设置里align-items: center; justify-items: center;,单元格内就居中了在这里插入图片描述
      3.一般情况下需要item中的文字也水平垂直 所以我给item也设置了grid 就可以实现了
      ps:如果没有设置 就会是下面的情况
      在这里插入图片描述
      参考 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

    展开全文
  • 设置img在表格table中的单元格td中水平垂直居中,想必很多的朋友都想实现此效果吧,接下来为大家详细介绍下实现代码,感兴趣的你可不要错过了哈或许对你有所帮助
  • 主要介绍了使用css实现的div水平垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下
  • 水平居中 默认html: <div class="parent"> <div class="child">child</div> </div> 默认css: .parent{ width: 400px; height: 80px; line-height: 80px; background: #...

    水平居中

    默认html:

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

    默认css:

     .parent{
        width: 400px;
        height: 80px;
        line-height: 80px;
        background: #ccc; 
     }
     .child{
         width: 80px;
         height: inherit;
         color: #fff;
         background: #000;      
     }
    

    图示:
    在这里插入图片描述
    水平居中:

    ① 使用inline-block + text-align
    使用text-align可以使内联标签、内联块的标签进行水平居中,那么我们就可以在子级child从块级标签变成内联块便签,在其父级使用text-align进行水平居中即可,代码添加如下:

    .parent{
    	text-align: center;
    }
    .child{
    	display: inline-block;
    }
    

    图示:
    在这里插入图片描述
    ② 使用table + margin
    子级使用table让其具有表格块级元素的特性,此时可以通过margin左右auto的特性,将其水平居中代码如下:

     .child{5
         display: table;
         margin: 0 auto;   
     }
    

    图示:
    在这里插入图片描述
    ③ 使用相对定位和绝对定位position + transform
    父级使用relative相对定位,子级child使用absolution相对父级进行绝对定位,然后子级通过left50%,将其最左边定位到父级的中间部位,然后通过transform中的translateX为-50%,将其中心定位到父级的中心部分代码如下:

    .parent{
       position: relative;
    }
    .child{
       position: absolute;
       left: 50%;
       -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
       -ms-transform: translateX(-50%);
       -o-transform: translateX(-50%); 
       transform: translateX(-50%);    
    }
    

    图示:
    在这里插入图片描述
    ④ 使用flex + justify-content
    将父级内部元素的布局更改为flex布局,并且通过justify-content约束内部元素为水平居中,代码如下:

     .parent{
        display: flex;
        justify-content: center;
     }
    

    当然也可以使用flex + margin也是可以进行水平居中的,代码如下:

     .parent{
        display: flex;
        /* justify-content: center; */
     }
     .child{
    	margin: 0 auto;
    }
    

    两种都可以将内部元素进行水平居中,图示:

    在这里插入图片描述

    垂直居中

    默认html:

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

    默认css:

     .parent{
        width: 80px;
        height: 400px;
        background: #ccc; 
     }
     .child{
    	 width: inherit;
         height: 80px;
         color: #fff;
         background: #000;      
     }
    

    图示:
    在这里插入图片描述
    垂直居中:
    ① 使用table-cell + vertical-align
    同理使用表格格元素的特性代码如下:

     .parent{
         display: table-cell;
         vertical-align: middle;
     }
    

    图示:
    在这里插入图片描述
    ② 使用相对定位决定定位position + transform
    同水平居中的原理一下,配合position和transform的自身偏移即可完成代码如下:

    .parent{
       position: relative;
    }
    .child{
       position: absolute;
       top: 50%;
       -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
       -o-transform: translateY(-50%); 
       transform: translateY(-50%);    
    }
    

    ③ 使用flex定位flex + align-items
    父级使用flex布局配合align-items实现内部元素垂直居中代码如下:

    .parent{
        display: flex;
        align-items: center;
    }
    

    同理flex布局可以使用margin:

     .parent{
        display: flex;
        /* align-items: center; */
     }
     .child{
    	margin: auto 0;
    }
    

    两种方法都可以是元素垂直居中
    图示:

    在这里插入图片描述

    水平垂直居中

    默认html:

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

    默认css:

     .parent{
         width: 400px;
         height: 400px;
         background: #ccc;
     }
     .child{
         width: 80px;
         height: 80px;
         line-height: 80px;
         text-align: center;
         color: #fff;
         background: #000;      
     }
    

    图示:
    在这里插入图片描述
    水平垂直居中:
    inline-block + text-align + table-cell + vertical-align
    根据利用单元格特性的思路就是结合水平居中的inline-block + text-align和垂直居中的table-cell + vertical-align代码如下:

    .parent{
         display: table-cell;
         vertical-align: middle;
         text-align: center;
    }
    .child{
         display: inline-block; 
    }
    

    图示:
    在这里插入图片描述
    ② 使用相对和绝对定位position + transform
    同样综合了水平居中和垂直居中的position + transform代码如下:

    .parent{
       position: relative;
    }
    .child{
       position: absolute;
       top: 50%;
       left: 50%;
       -webkit-transform: translate(-50%,-50%);
       -moz-transform: translate(-50%,-50%);
       -ms-transform: translate(-50%,-50%);
       -o-transform: translate(-50%,-50%); 
       transform: translate(-50%,-50%);    
    }
    

    原理不需多讲,就是全局top和left让内部元素的左上角对准父级的中心,然后自身通过translate进行内部偏移,图示就如上一张一样;

    ③ 使用相对和绝对定位position + margin偏移
    结合父级相对定位,子级绝对定位,通过top/left/right/bottom都为0进行上下左右拉伸,最好通过margin为auto的约束元素到父级的中心,具体看代码:

    .parent{
       position: relative;
    }
    .child{
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       margin: auto;   
    }
    

    ④ 使用flex布局中的justify-content + algn-items
    关于对flex布局不是很了解的可以看这篇文章 flex布局总结,那么我们直接看代码:

    .parent{
       display: flex;
       justify-content: center;
       align-items: center;
    }
    

    结语

    关于对水平居中、垂直居中、水平垂直居中的方法总结就到这里,不难看出方法都是万变不离其宗,整体下来很多都是差不多的,好了,如有错误,欢迎指正,小弟承蒙各位大佬的意见~

    展开全文
  • Flexbox实现一个div元素在body页面中水平垂直居中: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>  <html lang="en">  <head>  <meta charset="utf-8"/>  <title>Flexbox...
  • NULL 博文链接:https://highfly-s.iteye.com/blog/1878910
  • php gd库生成图片,只需要输入字符串,字数越多字体越小,水平垂直居中
  • <font color="#0081ff" size="3">css中常见的各类居中问题答案。

    Tips:元素一般分为 块级元素 行内元素

    块级元素可以设置高度,宽度,行内元素则不能,如果将行内元素变成行内块元素就可以设置宽高了,只需要将 display 属性设置为 inline-block 即可;

    一、 水平居中

    ​ 1.行内元素水平居中:给行内元素的父级元素设置 text-align: center ;

    <view style="text-align:center">
    	<text>水平居中</text>
    </view>   
    

    ​ 2.块级元素水平居中:确保块级元素有一个宽度,给行内元素设置 display: block ; 属性,再给该元素设置 margin: 0 auto ;

    <body>
        <view style="width: 100%; height: 100%;">
            <text style="display: block; width: 50px; height: 50px; margin: 0 auto ;">
                水平居中
            </text>
    	</view>
    </body>
    
    <!-- or -->
    
    <body>
        <view style="width: 100%; height: 100%;">
            <view style="width: 50px; height: 50px; margin: 0 auto ;">
                水平居中
            </view>
    	</view>
    </body>
    

    ​ 3.相对与绝对定位水平居中:确保父级元素具有相对定位属性 relative , 需要居中的子级元素具有绝对定位属性 absolute 。再给子级元素设置 left: 50% ; transform: translateX(-50%) ;

    <body style="position: relative;">
    	<view style="position: absolute; left: 50%; transform: translateX(-50%);">
        	水平居中
        </view>
    </body>
    
    <!-- or -->
    
    <body style="position: relative;">
    	<view style="position: absolute; right: 50%; transform: translateX(50%);">
        	水平居中
        </view>
    </body>
    

    ​ 4.使用 calc() 函数:看懂第3点方法,这第4点方法显得有些鸡肋了。这是在css3以前常见的方式。缺点很容易看出,宽度和减去的常量不能很好的动态变化;

    <body style="position: relative;">
    	<view style="position: absolute; width: 100px; left: calc(50% - 50px);">
        	水平居中
        </view>
    </body>
    
    <!-- or -->
    
    <body style="position: relative;">
    	<view style="position: absolute; width: 100px; right: calc(50% + 50px);">
        	水平居中
        </view>
    </body>
    

    二、水平垂直居中

    ​ 能够理解上述水平居中,那么水平垂直居中就很容易理解,需要注意的就是如何垂直。

    ​ 1.块级元素水平垂直居中:给元素的父级元素设置具体高度 line-height 等于 height 高度

    <view style="text-align: center; height: 100px; line-height:100px">
    	<text>水平垂直居中</text>
    </view>
    

    ​ 2.相对与绝对定位水平垂直居中:再给子级元素设置 left: 50% ; top: 50% ; transform: translate(-50%,-50%) ;

    <body style="position: relative;">
    	<view style="position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);">
        	水平垂直居中
        </view>
    </body>
    

    ​ 3. 固定定位中 left: 0 ; top: 0 ; right: 0 ; bottom: 0 : 确保元素有一固定宽高,再给元素设置一个 margin: auto ;

    <body>
    	<view style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px">
        	水平垂直居中
        </view>
    </body>
    

    ​ 4. flex 布局:最常见的一种布局方式,属性自由多变。给元素设置
    display: flex ; align-items: center; justify-content: center ;

    <body>
    	<view style="display: flex; align-items: center; justify-content: center;width: 200px; height: 200px">
        	水平垂直居中
        </view>
    </body>
    

    常见,常用的水平居中,水平垂直居中的方法都在这了。当然还有很多其它的方法,感兴趣话可以去研究研究。


    有疑惑的小伙伴,可能是我表达不清楚,可以留言讨论,如有错误,也希望大家不吝指出。
    展开全文
  • 作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼。这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要...
  • 作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用css居中”的效果,今天就写一篇关于css垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用...
  • 前端水平垂直居中实现

    千次阅读 2021-04-13 17:39:14
    text-align: center; align-items: center; display: -webkit-flex; justify-content: center;
  • 主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。
  • 说起水平垂直居中大家常看到的是使用绝对定位与负margin的配合或者是inline-block配合vertical-align:middle等方法。当然还有其他一些解决方案,比如说,在水平垂直居中系列中介绍了一些制作方案。但这些方案...
  • 一、绝对定位 + margin,让明确宽高的盒子水平垂直居中于窗口 <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=...
  • 第一种:将固定大小的div框相对窗口水平垂直居中,改变浏览器窗口大小时,依然保持水平垂直居中; 复制代码代码如下: <!doctype html> <html lang=”en”> <head> <title>水平垂直居中</...
  • 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star 仅居中元素定宽高适用 absolute + 负...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 89,592
精华内容 35,836
关键字:

水平垂直居中