div盒子水平垂直居中的方法

这个问题比较老,方法比较多,各有优劣,着情使用。

一、盒子没有固定的宽和高

方案1、Transforms 变形

这是最简单的方法,不近能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

top: 50%; left: 50%;

优点:

1.      内容可变高度

2.      代码量少

缺点:

1.      IE8不支持

2.      属性需要写浏览器厂商前缀

3.      可能干扰其他transform效果

4.      某些情形下会出现文本或元素边界渲染模糊的现象

<div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中。</div>
.wrapper {
            padding: 20px;
            background: orange;
            color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 5px;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);
        }

方案二2、在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。

<div class="wrapper">
        我不知道我的宽度和高是多少,我要实现水平垂直居中。
</div>
.wrapper {
            width: 500px;
            height: 300px;
            background: orange;
            color: #fff;
            /*只需要在父元素上加这三句*/
            justify-content: center; /*子元素水平居中*/
            align-items: center; /*子元素垂直居中*/
            display: -webkit-flex;
        }

二、盒子有固定的宽和高

方案1、margin 负间距

此方案代码关键点:1.必需知道该div的宽度和高度,

       2.然后设置位置为绝对位置,

         3.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,

         4.最后将该div分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。

<div class="wrapper">我知道我的宽度和高是多少,我要实现水平垂直居中。</div>
.wrapper {
            width: 400px;
            height: 18px;
            padding: 20px;
            background: orange;
            color: #fff;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -9px;
            margin-left: -200px;
        }

方案2、margin:auto实现绝对定位元素的居中(该方法兼容ie8以上浏览器)

此方案代码关键点:1、上下左右均0位置定位;

2、margin: auto;

<div class="wrapper">我不知道我的宽度和高是多少,我要实现水平垂直居中。</div>
.wrapper {
            width: 400px;
            height: 18px;
            padding:20px;
            background: orange;
            color: #fff;

            position: absolute;
            left:0;
            right:0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
时间: 2024-10-14 07:50:11

div盒子水平垂直居中的方法的相关文章

div盒子水平垂直居中的方法推荐

父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 方法三:(宽高不定) div绝对定位水平垂直居中[Transforms 变形] 兼容性:IE8不支持: 方法四:(宽高不定) flex布局(对父元素display:flex) 方法五: 父盒子display: table-cell和子盒子dis

div自适应水平垂直居中的方法

1.Flexbox布局: display:flex; justify-content:center; align-items:center; width:100%; 2.Bootstrap栅格布局 一共12格,分成3块,每块占4列.居中的内容写在中间的那一块. 3.圣杯/双飞翼(水平自适应居中的基础上) 第一步:居中的div写在最前面,width:100%撑满一整行.三个div都向左浮动float:left; <div class="main">Main</div&g

DIV文字水平垂直居中的方法

水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会发现这个属性"时灵时不灵",有些情况下我们加了这个属性之后仍然不见img或者text有任何的变化.那是因为vertical-align只作用在inline-block或者inline,还有table-cell等元素内.同时这两种还有有所不同.vertical-align并不是在高度内居中,

div盒子水平居垂直中的几种方法

div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="utf-8"/>        <style>            *{                margin: 0;                padding: 0;            }            /*方案1.使用transforms属性的translate

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div css让这个登录布局水平和css垂直居中. 这里介绍一种最简单兼容性最好的水平居中与上下垂直居中的方法. 1.具体实例代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &

实现没有宽高的盒子水平垂直居中

实现一个不设置宽高的盒子水平垂直居中的效果的方法 方法一.CSS+定位 让其父元素相对定位,内部元素绝对定位,这里的父元素为body. 原理:让未定义宽高的图片上下左右距离都为0.然后给一个margin自适应.可以想象成一个盒子,给了四个方向的相同的力,这样就会形成一种相对的均衡力量让其停留在中间位置了. <style> img{ position:absolute; top:0; bottom:0; left:0; right:0; margin: auto ; } </style&g

总结div里面水平垂直居中的实现方法

最近经常碰到要垂直居中的问题,所以想着总结一下:关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent"> <div class="child"> </div> </div> 1.使用定位的方法 .parent { width: 300px; height: 200px; border: 1px

探讨div水平垂直居中的方法

我们在开发当中经常会遇到需要将一个div(或者说是一个元素)水平垂直居中,小弟知道的可以实现的方法有一下三种. 第一种:利用绝对定位的方法,具体实现可以看这里 <div id = "parent"> <div id = "child"> </div> </div> #parent{ position:relative; height:500px; background:red; } #child{ position:a

div盒子水平、垂直居中

一.div文本的 水平居中:margin:0 auto; 垂直居中:line-height:80px;注释:这里line-height的值要和div的高一致. 二:div盒子居中 给最外面的父元素设置宽高 给要水平垂直居中的div加定位 location { width:200px; height:200px; background-color: #00FF00; position: relative; top: 50%; left: 50%; margin-top: -100px; margi