精华内容
参与话题
问答
  • 当然也可以用下面的方法下面说两种在屏幕正中(水平居中+垂直居中)的方法 放上示范的html代码:<body> <div class="main">

    最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。
    水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法

    下面说两种在屏幕正中(水平居中+垂直居中)的方法
    放上示范的html代码:

    <body>
    	<div class="main">
    		<h1>MAIN</h1>
    	</div>
    </body>
    
    • 方法一:

    div使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可,不一定要都是0。

    .main{
    	text-align: center; /*让div内部文字居中*/
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    }
    

    效果如图:
    这里写图片描述

    • 方法二:
      仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相距50%,垂直方向上一样,所以再用transform向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
     .main{
    	text-align: center;
    	background-color: #fff;
    	border-radius: 20px;
    	width: 300px;
    	height: 350px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	transform: translate(-50%,-50%);
    }
    
    • 方法三:
      对于水平居中,可以使用最简单的<center>标签,不过已经过时了,用法如下:
    <p><center>123</center></p>
    

    这个<center>标签就是相对于<p>标签里的文字,可以使其居中。

    由于center标签已经过时了,所以正规一点的话还是不建议使用的,可以使用如下的方式代替:

    <p style="text-align:center;">123</p>
    


    欢迎大家加入QQ群一起交流讨论,「吟游」程序人生——YinyouPoet
    展开全文
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2017-03-31 09:53:09
    body结构<body> <div> <...将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{

    body结构

    <body>
    	<div>
    		<img src="1.jpg" alt="haha">
    	</div>
    </body>
    

    方法一:
    将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。

    <style type="text/css">
    	*{margin: 0;padding: 0;}
        div{
    		width:150px;
    		height: 100px;
    		display: table-cell;
    		vertical-align: middle;
    		text-align: center;
    		border:1px solid #000;
    	}
    	img {
            width: 50px;
      		height: 50px;
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述

    方法二:
    通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半。

    <style type="text/css">
    	*{margin: 0;padding:0;}
    	div{
    		width:150px;
    		height: 100px;
    		position: relative;
    		border:1px solid #000;
    	}
    	img {
      		width: 50px;
      		height: 50px;
      		position: absolute;
      		top: 50%;
    		left: 50%;
      		margin-top: -25px; /* 高度的一半 */
      		margin-left: -25px; /* 宽度的一半 */
    	}
    </style>
    

    结果如下图所示:
    这里写图片描述


    很久以前的文章了,看到浏览量这么高,我再补充几种实现方法

    方法三:可以用在不清楚图片图片或元素的真实宽高情况下
    还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
    

    方法四:

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            position: relative;
            border:1px solid #000;
        }
        img {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    

    方法五:弹性布局flex

    <style type="text/css">
        *{margin: 0;padding:0;}
        div{
            width:150px;
            height: 100px;
            border:1px solid #000;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        img {
            width: 50px;
            height: 50px;
        }
    </style>
    

    效果都一样,希望能帮到大家!

    读后有收获并有兴趣的可以微信打赏哈哈:
    在这里插入图片描述

    展开全文
  • 垂直居中

    2017-08-16 15:17:57
    已知高度宽度元素的水平垂直居中1.绝对定位与负边距实现。利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:#container{ position:...

    已知高度宽度元素的水平垂直居中

    1.绝对定位与负边距实现。

    利用绝对定位,将元素的top和left属性都设为50%,再利用margin边距,将元素回拉它本身高宽的一半,实现垂直居中。核心CSS代码如下:
    #container{
        position:relative;
    }
    
    #center{
        width:100px;
        height:100px;
        position:absolute;
        top:50%;
        left:50%;
        margin:-50px 0 0 -50px;
    }

    2.绝对定位与margin

    这种方法也是利用绝对定位与margin,但是无需知道被垂直居中元素的高和宽。核心代码如下:
    #container{
        position:relative;
    }
    #center{
        position:absolute;
        margin:auto;
        top:0;
        bottom:0;
        left:0;
        right:0;
    }

    未知高度和宽度元素的水平垂直居中

    1.当要被居中的元素是inline或者inline-block元素

    当要被居中的元素是inline或者inline-block的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
    #container{
        display:table-cell;
        text-align:center;
        vertical-align:middle;
    }
    #center{
    
    }

    2.利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中

    #container{
        position:relative;
    }
    #center{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    3.flex布局轻松解决

    #使用flex布局,无需绝对定位等改变布局的操作,可以轻松实现元素的水平垂直居中。
    #container{
        display:flex;
        justify-content:center;
        align-items: center;
    }
    
    #center{
    
    }

    transform和flex需要考虑兼容性。
    某些浏览器需要加前缀

    .flexboxtest{
       display: flex;
       display: -webkit-flex; //Safari仍旧需要使用特定的浏览器前缀
    }
    展开全文
  • 关于微信小程序文字水平垂直居中

    万次阅读 多人点赞 2018-06-02 22:36:38
    1.用line-height的值和view的height值一样wxml:&lt;view class='container'&gt; 这是个例子 &lt;/view&gt;wxss:.container{ border: 2rpx black solid; width: 400rpx;... line-h...

    1.用line-height的值和view的height值一样

    wxml:

    <view class='container'>
        这是个例子
    </view>

    wxss:

    .container{
      border: 2rpx black solid;
      width: 400rpx;
      height: 200rpx;
      text-align: center;
      line-height: 200rpx;
    }

    效果:

    2.用flex布局

    wxml:

    <view class='container'>
        <text>这是个例子
        </text>
    </view>

    wxss:

    .container{
      border: 2rpx black solid;
      width: 400rpx;
      height: 200rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    效果和第一种结果一样。

     

    (注意text标签后如果换行再写文字,那显示的结果也会有空行)

    比如我居中后这样写:

    <view class='container'>
        <text>
        这是个例子
        </text>
    </view>

    结果是:

    这样写:

    <view class='container'>
        <text>
    
        
        这是个例子
        </text>
    </view>

    结果:

     

    展开全文
  • html 中div垂直居中的三种方式

    万次阅读 2011-01-26 16:08:00
    1、第一种: <styletype="text/css"> <!-- .con_div{ width:400px; height:300px; border:1pxsolid#777; text-align:center; display:table-cell; vertical-align:middle;...back...
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:28:12
    垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直居中 已知高度和宽度的元素 未知高度和宽度的元素 方案一:使用定位属性 方案二:使用flex布局实现 水平居中  行内元素 首先看它的父元....
  • 这里通过下面一个实例来讲一下单行文字居中和多行文字居中的方法: 一、单行文字居中 原理: 使用height 和 line-height,相等的原理。 二、多行文字居中 原理: 将多行文字当做一张图片去处理...
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。
  • html 图片垂直居中

    2016-07-20 17:17:45
    让 图片 在 div 中 水平 垂直 居中
  • 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进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • <div style="text-align:center; width:100%;height:100%;margin:0px; " > <button style="font-size:2em; width: 70%;...background-color: red" class=" ub-ac bc-...已经水平居中了,如何让它垂直居中
  • 水平居中 方法一:在父容器上定义固定宽度,margin值设成auto &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;...
  • div垂直居中-CSS元素垂直居中方法

    千次阅读 2018-11-01 18:54:16
    div垂直居中-CSS元素垂直居中方法分2类: 1、文本垂直居中的解决方案-2种 https://edu.csdn.net/course/play/9950/211677 2、块级元素垂直居中的解决方案-6种 https://edu.csdn.net/course/play/9950/211678  ...
  • 设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity(Gravity.CENTER); 备注:android:gravity和android:...
  • 1.单行文字垂直居中,图片垂直居中: (1)用简单的一行代码即可实现单行文字垂直居中:设置 line-height 的值 等于高度的值。代码如下: .div { height: 500px; line-height :500px; } (2)图片垂直居中:...
  • 一、水平居中  1、行内元素水平居中 text-align :center  2、块级元素水平居中 margin:0 auto   3、多个块状元素的水平居中  实现多个水平排列的块状元素的水平居中,是将要水平排列的块状元素设为display...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • 有些朋友会发现,如果一行内容中有图片有文字的话,文字往往会自动的底部对齐,影响美观,那如何让它们相对于垂直居中呢,很简单,就是在图片和文字所在的行中添加CSS属性:vertical-align:middle;这样,它们在同一...
  • html 文字上下垂直居中

    万次阅读 2019-06-05 17:13:08
    当把 line-height 的高度设置和 height 高度一样就能使 文字垂直居中 一段简单的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <.....

空空如也

1 2 3 4 5 ... 20
收藏数 21,307
精华内容 8,522
关键字:

垂直居中