水平居中

行内元素

行内元素：（img、span、文字等行内元素），通过在父级元素设置 text-align:center 使元素水平居中。

块级元素

块级元素：（div、p、h1...h6、ul、li等块级元素），通过在要居中元素设置 margin:0 auto(上、右、下、左)，这里表示上下0 左右自适应，达到元素水平居中。

垂直居中

行内元素

行内元素：（img、span、文字等行内元素），通过在父级元素设置display: table-cell;vertical-align: middle; 使元素垂直居中，如果是单行文字或者其他可以设置line-height:容器高；

块级元素

高度固定通常是使用

绝对定位与负边距
绝对定位与margin
display table-cell

高度不固定

display table-cell
translate
flex 布局

还是上代码比较实在

行内元素水平、垂直居中

文字、图片水平、垂直居中

主要是利用

text-align: center; //水平对齐方式
display: table-cell;//以td形式渲染
vertical-align: middle;//垂直对齐方式

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<style>

    * {

        padding: 0;

        margin: 10px 0 0 0;

    }

    div {

        width: 200px;

        height: 200px;

        border: solid 1px red;

    }

    img {

        width: 100px;

        height: 100px;

        border: 0px;

    }

    span {

        border: solid 1px blue

    }

    .div1 {

        text-align: center;

        display: table-cell;

        vertical-align: middle;

    }

    .div2 {

        line-height: 200px;

        text-align: center;

        margin: 0 auto;

    }

</style>

<body>

<p>文字</p>

<div class="div1" title="行内元素水平垂直居中">

    文字水平垂直居中1

</div>

<p>文字</p>

<div class="div2" title="行内元素水平垂直居中">

    文字水平垂直居中2

</div>

<p>图片水平垂直居中</p>

<div class="div1" title="行内元素水平垂直居中">

    <img src="data:images/pro_1.jpg">

</div>

<p>span水平垂直居中</p>

<div class="div1" title="行内元素水平垂直居中">

    <span>this is span</span>

</div>

</body>

</html>

块级元素水平、垂直居中

固定高度水平、垂直居中

固定高度水平垂直居中一般思路：

绝对定位与负边距

脱离文档流之后，在通过设置负的边距来达到水平、垂直居中效果；

  <style>

        * {

            padding: 0;

            margin: 0 0 0 0;

            box-sizing: border-box;

        }

        p{margin:20px 0 0 20px;}

        /*绝对定位与负边距实现*/

        .divBox {

            height: 200px;

            border: solid 1px red;

            position: relative;

        }

        .divContentBox{

            width: 100px;

            height: 100px;

            border: solid 1px blue;

            text-align: center;

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -50px;

            margin-left: -50px;

        }

    </style>

<p>绝对定位与负边距实现</p>

<div class="divBox">

    <div class="divContentBox">固定宽度、高度水平垂直居中</div>

</div>

如果不能脱离文档流就增加一个空的容器

<style>

  /*增加空容器与margin */

        #divBox{

            width: 200px;

            height: 200px;

            border: solid 1px red;

        }

       #nullBox{

           width: 100%;

           height: 50%;

           background-color: blue;

         }

        #divContentBox {

            width: 100px;

            height: 100px;

                margin: -50px auto;

            border: solid 1px red;

        }

</style>

<p>增加一个空的容器</p>

<div id="divBox">

    <div id="nullBox"></div>

    <div id="divContentBox">固定宽度、高度水平垂直居中</div>

</div>

利用绝对定位与margin

<style>

#div1Box{

           /*width: 200px;*/

           height: 200px;

           border: solid 1px red;

           position: relative;

       }

        #ContentBox{

            height: 100px;

           display: inline;

            border: solid 1px blue;

            position: absolute;

            margin: auto;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

        }

</style>

<p>绝对定位与margin</p>

<div id="div1Box">

    <div id="ContentBox">固定高度水平垂直居中</div>

</div>

css3 transform

<style>

 #container{

            height: 300px;

            position:relative;

            border: solid 1px red;

        }

        #center{

            position: absolute;

            width:100px;

            height:100px;

            border: solid 1px red;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

        }

</style>

<p>css3 transform</p>

<div id="container">

    <div id="center">固定高度水平垂直居中</div>

</div>

display table-cell

<style>

#container1{

            width: 600px;

            text-align: center;

            vertical-align: middle;

            border: solid 1px red;

            display: table-cell;

            height: 300px;

        }

        #center2{

            width: 100px;

            height: 100px;

            border: solid 1px red;

            display: inline-block;

        }

    </style>

<p>display table-cell</p>

<div id="container1">

    <div id="center2">>固定高度水平垂直居中</div>

</div>

高度不固定水平、垂直居中

display:table-cell

父元素设置 display: table-cell;
text-align: center;
vertical-align: middle; 可以达到垂直居中；
子元素设置margin: 0 auto;可以达到水平居中；

translate

子元素脱离稳档流
top、left 偏移 50%
transform: translate(-50%, -50%);返回自身负的50%

flex布局

子元素设置水平、垂直对齐方式justify-content: center;align-items: center;

完整代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        /*-- display table-cell */

        #root {

            width: 100%;

            display: table;

        }

        .bigBox {

            width: 100%;

            height: 200px;

            border: solid 1px red;

            display: table-cell;

            text-align: center;

            vertical-align: middle;

        }

        .content {

            width: 300px;

            background-color: green;

            margin: 0 auto;

        }

        /*translate */

        .parent {

            width: 100%;

            height: 200px;

            border: 1px solid red;

            position: relative;

        }

        .child {

            position: absolute;

            top: 50%;

            left: 50%;

            -webkit-transform: translate(-50%, -50%);

            -ms-transform: translate(-50%, -50%);

            transform: translate(-50%, -50%);

            background: #22B14C;

        }

        /*flex*/

        .parent1 {

            width: 100%;

            height: 200px;

            border: solid 1px red;

            display: flex;

            justify-content: center;

            align-items: center;

        }

        .child1 {

            background: green;

        }

    </style>

</head>

<body>

<div id="root">

    <div class="bigBox">

        <div class="content">

            <span>this is span</span><br/>

            <p>这是一个新的开始</p>

            <div>

                <ul>

                    <li>1</li>

                    <li>2</li>

                    <li>3</li>

                    <li>4</li>

                </ul>

            </div>

        </div>

    </div>

</div>

<div class="parent">

    <div class="child">

        <p>this is demo2</p>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </div>

</div>

<div class="parent1">

    <div class="child1">

        <p>this is demo3</p>

        <p>this is demo3</p>

        <p>this is demo3</p>

        <li>a</li>

        <li>b</li>

        <li>c</li>

        <li>d</li>

    </div>

</div>

</body>

</html>

css 水平、垂直居中的更多相关文章

CSS水平垂直居中总结
行内元素水平居中把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中水平居中有两种情况: 子元素是内联元素这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
介绍一种css水平垂直居中的方法（非常好用！）
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

java执行cmd命令并获取输出结果
1.java执行cmd命令并获取输出结果 import java.io.BufferedReader; import java.io.InputStreamReader; import org.apa ...
hbase 安装笔记
1.安装在官方镜像站点下载hbase2.0,地址:https://www.apache.org/dyn/closer.lua/hbase/ 解压tar xzvf hbase-2.0.4-bin.ta ...
HTML option 标签的 selected 属性
HTML option 标签的 selected 属性 http://www.w3school.com.cn/tags/att_option_selected.asp 1.一般做WEB的时候,Chro ...
【bzoj4810】【ynoi2018】由乃的玉米田
4810: [Ynoi2017]由乃的玉米田 Time Limit: 30 Sec Memory Limit: 256 MBSubmit: 1090 Solved: 524[Submit][Sta ...
Contest Record
Contest 1135 at HZOI Problem A: 优美的棋发现一个可以证明的规律就是了……忘记给<<运算的左边变量转化为long long类型了,结果挂了20分……以后一定记 ...
《剑指offer》— JavaScript（7）斐波那契数列
斐波那契数列题目描述大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 实现代码 function Fibonacci(n) { var arr = ...
堡垒机初识--paramiko模块
一.paramiko模块 Python的paramiko模块基于SSH用于连接远程服务器并执行相关的操作. 1.1 在windows上安装paramiko模块测试环境: win10 , python ...
eclipse中修改svn用户名和密码
开发中有时候用公共的电脑提交一些代码,eclipse没有专门的切换svn账户的功能.查阅资料得出解决办法: 1. 查看你的Eclipse 中使用的是什么SVN Interface windows & ...
Counting Pair
Counting Pair Time Limit: 1000 ms Memory Limit: 65535 kB Solved: 112 Tried: 1209 Submit Status Best ...
css3中新增的样式使用方法
在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...

css 水平、垂直居中

水平居中

行内元素

块级元素

垂直居中

行内元素

块级元素

行内元素水平、垂直居中

文字、图片水平、垂直居中

块级元素水平、垂直居中

固定高度水平、垂直居中

绝对定位与负边距

如果不能脱离文档流就增加一个空的容器

利用绝对定位与margin

css3 transform

display table-cell

高度不固定水平、垂直居中

display:table-cell

translate

flex布局

css 水平、垂直居中的更多相关文章

随机推荐

热门专题