CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

首先，我们来看下垂直居中：

（1）、如果是单行文本，则可以设置的line-height的数值，让其等于父级元素的高度！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box{

            background: green;

            height:200px;

        }

        a {height:%;

        line-height: 200px;

        color:red;

}

 </style>

</head>

<body>

   <div class="box">

       <a href="">ggg </a>

   </div>

</body>

</html>

（2）、如果元素是行内块级元素，一般会使用diaplay:inline-block,vertical-align:middle，还有一个伪元素让元素内容处于容器中央！给父元素添加伪元素！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background: green;

            height:200px;

        }

     .box::after, .box2{

         display:inline-block;

         vertical-align: middle;

     }

     .box::after{

         content:'';

         height:%;

     }

     .box2{background-color:red;width:20px;height:20px;}

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

（3）、通过display：flex来实现垂直居中；

父级：display：flex；

子元素：align-self：center；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background: green;

            height:300px;

            width: 600px;

            display:flex;

        }

        .box2{background:red;

        width:%;

        height:%;

        align-self: center;

     }

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

（4）、使用display：table进行垂直居中！

给父元素设置display：table；子元素设置为display：table-cell;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

            display:table;

        }

       .box .box2{

           color:red;

        display:table-cell;

         vertical-align: middle;

}

 </style>

</head>

<body>

   <div class="box">

       <div class="box2">ddddd</div>

   </div>

</body>

</html>

（5），已经知道父元素的高度，给子元素相对定位，在通过translaY（）得到垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

        }

       .box .box2{

           background-color:red;

            width:%;

             height:%;

             position: relative;

             top:%;

             transform:translateY(-%);

}

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

6)、父元素高度不知道，同过transform实现，先给父元素相对定位，在给子元素绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

            position: relative;

        }

       .box .box2{

           background-color:red;

            width:%;

             height:%;

             position: absolute;

             top:%;

             transform:translateY(-%);

}

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

二、水平居中：

（1）、行内元素方案，只要把行内元素包裹在一个盒子中，并且在他父级元素添加如下属性：text-align：center；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

            text-align:center;

        }

      P{color:red;}

 </style>

</head>

<body>

   <div class="box">

       <p>1111</p>

   </div>

</body>

</html>

（2）、单个块状元素解决方案：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

            text-align:center;

        }

    .box2{

        background-color: red;

        width: 20px;

        height: 20px;

        margin: auto;

    }

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

3）、多个块状元素解决方案：父元素设置为text-align：center；子元素设置为：display：inline-block;

相信很多人在刚接触前端或者中期时候总会遇到一些问题及瓶颈期，如学了一段时间没有方向感或者坚持不下去一个人学习枯燥乏味有问题也不知道怎么解决，对此我整理了一些资料喜欢我的文章想与更多资深大牛一起讨论和学习的话欢迎加入我的学习交流群907694362

!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

            text-align:center;

        }

    .box2, .box3{

        background-color: red;

        width: 20px;

        height: 20px;

        display:inline-block;

    }

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

       <div class="box3"></div>

   </div>

</body>

</html>

也可以使用flexbox来实现：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

           display:flex;

           justify-content:center;

        }

    .box2, .box3, .box4{

        background-color: red;

        width: 20px;

        height: 20px;

    }

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

       <div class="box3"></div>

       <div class="box4"></div>

   </div>

</body>

</html>

（4）、不定宽度块元素水平居中：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            float:left;

            position: relative;

            left:%;

        }

    .box ul{

        position:relative;

        left:-%;

    }

 </style>

</head>

<body>

   <div class="box">

       <ul>

           <li></li>

           <li></li>

           <li></li>

       </ul>

   </div>

</body>

</html>

三：实现水平+垂直居中，也就是在中央：（1）单行行内元素：父元素设置：text-align:center，display：table-cell;vertical-align:middle,在这里，图片，文字，都是一样的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: #ccc;

            width:500px;

            height: 500px;

            display:table-cell;

            text-align: center;

            vertical-align: middle;

        }

        img{width:50px;

        height: 50px;}

 </style>

</head>

<body>

   <div class="box">

      <img src="5.jpg" alt="">

   </div>

</body>

</html>

文字在中央，还可以父级设置为text-align:center;line-height设置为父元素的height

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: #ccc;

            width:500px;

            height: 500px;

            text-align: center;

        }

   p{line-height: 500px;}

 </style>

</head>

<body>

   <div class="box">

  <p></p>

   </div>

</body>

（2）对于单个块级元素，父元素设置为相对定位，子元素设置为绝对定位高度，宽度为50%

!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: #ccc;

            width:500px;

            height: 500px;

            position: relative;

        }

        .box2{position: absolute;

        top:%;

        left:%;

        background-color: black;

        width: 20px;

        height: 20px;}

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

（3）、flex实现不定宽度水平+垂直居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .box {

            background-color: green;

            height:300px;

            width: 600px;

           display:flex;

           justify-content:center;

           align-items:center;

        }

    .box2, .box3, .box4{

        background-color: red;

        width: 20px;

        height: 20px;

    }

 </style>

</head>

<body>

   <div class="box">

       <div class="box2"></div>

   </div>

</body>

</html>

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）的更多相关文章

CSS - div居中在屏幕中(水平居中 + 垂直居中)
方法一代码 <div> <h1>404 Not Found.</h1> </div> <style> div { text-align: c ...
用CSS 实现非浮动元素的水平居中/垂直居中/水平垂直居中
一.水平居中 (1)行内元素解决方案只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: .parent { text-align:center ...
CSS position &居中（水平，垂直）
css position是个很重要的知识点: 知乎Header部分: 知乎Header-inner部分: position属性值: fixed:生成绝对定位的元素,相对浏览器窗口进行定位(位置可通过: ...
（前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中利用margin: 0 ...
HTML+CSS，让div在屏幕中居中（水平居中+垂直居中）方法总结
最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单. 水平居中直接加上<center>标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两 ...
用css让一个容器水平垂直居中
阅读目录方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
CSS布局：元素水平垂直居中
CSS布局:元素水平垂直居中本文将依次介绍在不同条件下实现水平垂直居中的多种方法水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
css知识笔记：水平垂直居中（别只看，请实操！！！）
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...

随机推荐

Git - Git简介与客户端安装
简介 Git是目前世界上最先进的分布式版本控制系统(没有之一)! 集中式版本控制系统(CVS/SVN),版本库是集中存放在中央服务器的,而一般工作的时候,用的都是自己的电脑,所以要先从中央服务器取得最 ...
爬虫模拟有道字典进行翻译,还发现了一条好玩的js
08.14自我总结爬虫模拟有道字典进行翻译一.代码 import requests from lxml.html import etree # headers= { # 'User-Agent': ...
剑指offer笔记面试题9----用两个栈实现队列
题目:用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail和deleteHead,分别完成在尾部插入节点和在队列头部删除节点的功能. 测试用例: 往空的队列里添加.删除元素. ...
OC-类似歌词字体颜色逐字变化的实现方法
预期实效果图如下: 如上图所示,文字的颜色会根据时间的移动,逐字变成绿色. 实现方法:(1)调用方法: 用 void UIRectFillUsingBlendMode(CGRect rect, CGB ...
IDEA使用svn拉取多模块项目
如果没有安装过svn客户端,安装的时候需要选择安装第二个工具,如下图所示安装小乌龟, 自行搜索, 注意点是需要选择安装第二个工具因为默认是不安装的, 而这个组件是集成到IDEA ”必须的” . 如 ...
bay——安装_Oracle 12C-RAC-Centos7.txt
★★★____★☆★〓〓〓〓→2019年6月26日10:29:42 bayaim-RAC ——搭建第4次VMware vSphere Client6.0 ----------------------- ...
opensciencegrid - GridFTP 安装
最近配置一个GridFTP 用于测试其传输FTP性能, 在这里简单记录,备忘:使用本教程可以简单起一个GridFTP用于测试服务: 预配置环境: 测试系统:CentOS 7 1806 配置Yum仓库: ...
nvidia quadro m5000 驱动安装 - 1804 ubuntu; nvidia-smi topo --matrix 查看gpu拓扑；nvidia-smi命令使用；
查看GPU型号: lspci | grep -i nvidia 驱动安装: https://www.nvidia.cn/Download/index.aspx?lang=cn 下载对应版本的驱动驱动程 ...
Mac下编译libpomelo静态库，并在cocos2dx项目中引用
最近在学习cocos2dx的过程中需要和服务器进行交互,所以这几天在学习libpomelo静态库的编译和使用.之前在windows系统下编译libpomelo,并在VS中引入比较顺利:但是,目前对Ma ...
nodejs+Express中使用mustache模板引擎
由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）

CSS3/CSS之居中解析（水平+垂直居中、水平居中，垂直居中）的更多相关文章

随机推荐

热门专题