精华内容
下载资源
问答
  • 水平垂直居中

    2020-02-27 17:16:29
    水平垂直居中的几种方法先水平再垂直flex 布局绝对定位 + transform行内元素 先水平再垂直 通过设置margin: 0 auto实现水平居中 .content { width: 300px; height: 300px; background: orange; margin: 0 auto....

    先水平再垂直

    通过设置margin: 0 auto实现水平居中

     .content {
                width: 300px;
                height: 300px;
                background: orange;
                margin: 0 auto;
            }
    

    在这之后,我们先要设置div元素的祖先元素html和body的高度为100%,再通过定位使其向下移动,最后设置margin-top属性垂直居中

     html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;
                margin: 0 auto; /*水平居中*/
                position: relative;
                top: 50%; /*偏移*/
                margin-top: -150px; 
            }
    

    flex 布局

     html,body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        
            body {
                display: flex;
                align-items: center; /*定义body的元素垂直居中*/
                justify-content: center; /*定义body的里的元素水平居中*/
            }
            .content {
                width: 300px;
                height: 300px;
                background: orange;        
            }
    

    只需要设置父元素即可

    绝对定位 + transform

    .box {
      position: relative;
    }
    .item {
      position: absolute;
      left: 50%;
      right: 50%;
      transform: translate(-50%, -50%);
    }
    
    

    这与第一个方法差不多

    行内元素

    于行内元素来说,垂直居中可以将line-height的值设为元素高度。而水平居中只需要设置父元素text-align属性为center。
    如果要居中的不是文本,对于设置了display为inline-block的元素来说,也是可以做到的。inline-block身负行内元素与块级元素的特性

    .box {
      width: 300px;
      height: 400px;
      border: 1px red solid;
      text-align: center;
    }
    .item {
      height: 40px;
      display: inline;
      line-height: 400px;
      border: 1px solid green;
    }
    
    
    展开全文
  • 实现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>
    

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

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

    展开全文
  • 文章目录一、垂直居中二、水平居中三、水平垂直居中 参考 一、垂直居中 二、水平居中 三、水平垂直居中


    参考

    一、垂直居中

    二、水平居中

    三、水平垂直居中

    展开全文
  • div相对于父元素水平垂直居中(相对网页水平垂直居中在下面) 弹性布局 父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中 display:flex; justify-content:center; align-items:center; 使用CSS3 transform ...

    div相对于父元素水平垂直居中(相对网页水平垂直居中在下面)

    1. 弹性布局

      父元素作为容器设置宽高、弹性布局、水平轴和交叉轴居中

      display:flex;
      justify-content:center;
      align-items:center;
      
    2. 使用CSS3 transform 和 绝对定位

      父元素有宽高设置相对定位

      position:relative;
      

      子元素设置

      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      
    3. 使用绝对定位

      父元素有宽高设置相对定位

      position:relative;
      

      子元素设置

      position:absolute;top:50%;left:50%;margin-top:-50%子元素宽;margin-left:-50%子元素高;
      
    4. 使用 text-align:center; vertical-align:middle;

      父元素有宽高设置 \

      display:table-cell;  text-align:center;  vertical-align:middle;
      

      子元素设置

      display:inline-block
      
    5. 绝对定位居中(margin:0 auto)

      父元素设置相对定位

      position:relative;
      

      子元素设置绝对定位

      margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;
      

    div相对于网页水平垂直居中

    1. 使用CSS3 transform 和 绝对定位

      子元素设置

      position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      
    2. 绝对定位居中(margin:0 auto)

      子元素设置绝对定位

      margin:auto;position:absolute;top:0;left:0;bottom:0;right:0; 
      
    展开全文
  • 主要介绍了html元素 水平居中、垂直居中、水平垂直居中于其父级元素的方法,需要的朋友可以参考下
  • 文章目录水平居中块元素水平居中行内元素水平居中垂直居中块元素垂直居中行内元素垂直居中img垂直居中input(radio、checkbox)垂直居中多行文本垂直居中水平垂直居中固定宽高不定宽高 水平居中 块元素水平居中 行内...
  • 本文主要介绍水平居中,垂直居中,还有水平垂直居中各种办法,思维导图如下: 水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、...
  • flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&...
  • 水平居中/垂直居中/水平垂直居中总结 1.1 内联元素水平居中 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>内联元素水平居中</title> <style> div {...
  • 布局:5种水平居中 + 3种垂直居中 + 3种水平垂直居中
  • css水平居中、垂直居中、水平垂直居中 水平居中 行内元素:block+text-align 块级元素: 方案一:分宽度定不定两种情况   定宽度——margin: 0 auto;(作用:使盒子自己居中,意思是上下距离为0,auto就是左右...
  • 前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中、垂直居中和水平垂直居中。这次,借此回顾总结一下,并在此记录下相关内容。 一、水平居中:  (1)行内元素的水平居中  ...
  • WORD文字怎样设置水平垂直居中将word文字设置水平垂直居中的方法如下(以windows10系统的word2019版为例):打开word文档,点击插入右键文本框,在随后打开的菜单中点击“设置文本框格式”。水平居中与垂直居中指什么...
  • CSS-水平居中、垂直居中、水平垂直居中 1、水平居中 水平居中可分为行内元素水平居中和块级元素水平居中 1.1 行内元素水平居中 这里行内元素是指文本text、图像img、按钮超链接等,只需给父元素设置text-align:...
  • 设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_TxtTitle.setGravity(Gravity.CENTER); 备注:android:gravity和android:...
  • 原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习; <div class="container"> <div class="item">1</div> <div class=...
  • div内图片和文字水平垂直居中

    万次阅读 2017-11-29 17:32:36
    大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现...
  • CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 水平居中效果图 水平居中全局样式 .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; ...
  • 首先呢先介绍下居中的方法都有哪些...文字水平垂直居中代码片段<!-- html部分 --> <div class="center">文字水平垂直居中</div> /* css部分 */ .center{ text-align: center; width: 300px; ...
  • 水平居中 1.父元素固定宽高,子元素设置margin: 0 auto; 2.在子元素中将display设置为inline...水平垂直居中 1.绝对定位,确认宽高设置margin属性为宽高的负一半 代码: width: 200px; height: 100px; background-colo
  • 水平垂直居中下面代码视图层统一代码结构:<div class="father"> <div class="son"></div> </div>1.水平居中:应用场景:整体网站居中,文字排版居中css代码:.father{ ...
  • 这里父元素和子元素的宽高都是不确定的,想实现子元素在父元素中的水平居中、垂直居中、水平垂直居中。下面列出了部分解决方法,如果大家有好的方法,欢迎留言~ 一、水平居中 html代码如下: &lt;div class=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,557
精华内容 5,422
关键字:

水平垂直居中