🍁 Ellison`s Blog

  

  • 首页
  • PHP
  • 前端
  • Linux
  • Database
  • Python
  • Java
  • GoLang
  • 其他
  • 见识
  • 随言碎语
  • 登录

CSS中的居中问题总结

  • Ellison
  • 2018-02-28 15:29
  • 前端
  • 1097
  • CSS

一、水平居中

1、行内元素(文字、链接)

此类居中,只要在在文字等元素包裹的父元素加上

 text-align: center;
2、块状元素居中

此类要在有宽度的前提下。设置左右margin为auto即可

div{
    width:100px; //任意宽度
    margin-left: auto;
    margin-right: auto;
}
3、多个块状元素居中

此类大致有两种思路可以实现

  • 使用 flex 弹性盒子布局
<style>
*{
  margin:0;
  padding:0;
}
body{
  padding:20px;
}
div{
  border:1px solid #ccc;
}
.wrapper{
   display: flex;
  justify-content: center;
  padding:20px;
}
.item{
  margin:10px;
  width:80px;
  height:80px;
  background:#ccc;
}
<body>
  <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
<style>

多块状-Flex水平居中:

  • 使得多个块状元素变为行内元素,然后外层包裹父容器,使得转化为单个块状元素的居中
<style>
*{
  margin:0;
  padding:0;
}
div{
  border:1px solid #ccc;
}
.wrapper{
  text-align:center;
  padding:20px;
}
.item{
  display:inline-block;
  width:80px;
  height:80px;
  background:#ccc;
}

</style>
<div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

多块状-内联水平居中:

二 、垂直居中问题

1、行内元素(文字、链接)

①、单行内容
有的时候文字本身就是垂直居中的,因为文字上下方的padding设置的是相等的,若是没有设置padding则可以使得line-height等于父容器的高度即可。

<style>
</style>
div{
  height:100px;
  padding:20px;
  border:1px solid;
  line-height:100px;
}
<div>
    XXXXX
</div>

单行垂直居中:

②、多行居中
多行文字在表格中默认就是垂直居中的。利用这一特点可以设置父容器为display:table ,然后设置内部元素为display: table-cell;

<style>
div{
   border:1px solid #ccc;
   width:250px;
   height:300px;
   display: table;
}
div p{
  display: table-cell;
  vertical-align: middle;
}
</style>
  <div> 
    <p>sssss s ssssss s ss sssss sss ssssss sssssss ssssssssssssss</p>
</div>

表格垂直居中:

由于table过于难于布局,因此我们可以使用flex布局,不过父容器的高度不能设置,有内部元素的height决定整个容器的高度

<style>
div{
   border:1px solid #ccc;
   width:250px;
  
   display: table;
}
div p{
  
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 250px;
}
</style>

flex垂直居中

如果上述两种方法都不能实现,垂直居中还有一个奇淫巧计,使用伪类的方法达到垂直居中,可以使用伪类来创造一个空的元素,两个vertical-align:middle的inline-block并排的话,高度小的那个会相对高的那个垂直居中排放

<style>
*{
  margin:0;
  padding:0;
}
div{
  width:300px;
  height:300px; 
  text-align:center;
  border:1px solid;
}
div p
{
   width: 292px;
  vertical-align:middle;
  display: inline-block;
}
div:before{
  content: " ";
  display: inline-block;
  height: 100%;
  width:0;
  vertical-align: middle;
}
</style>
  <div >
     <p>ssss ssss sss sss ssss sss ssssssssssss ssssss sss sss sss ss ss ss ss ss ss ss ss ss ss  </p> 
  </div>
2、块状元素

①、知道元素高度

.parent { position: relative;
}
.child { 
position: absolute; 
top: 50%; 
height: 100px; 
margin-top: -50px; /* 根据元素高度 */
}

②、不知道元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

③、flex布局

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
三、垂直&水平 一同居中

1、固定宽高的元素

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

2、宽高未知元素

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3、flex布局

.parent {
 display: flex; 
 justify-content: center;
 align-items: center;
}

点击分享本文:

本文为 Ellison 个人笔记,文章来自于网络或个人总结,转载无需和我联系,但请注明来自 Ellison`s Blog https://www.ruoxiaozh.com

  • 上一篇: EditorConfig 编码规范配置
  • 下一篇: Laravel 开发必备辅助函数
Ellison`s Blog
请先登录后发表评论
  • 最新评论
  • 总共0条评论

加入组织

  • QQ
  • 1. 手 Q 扫左侧二维码

    2. 搜群:650017266

    3. 点击 PHP 技术开发交流

热门标签

  • Laravel (13)
  • Vue (0)
  • Git (2)
  • Nginx (9)
  • Vagrant (2)
  • Docker (0)
  • Composer (0)
  • thinkPHP (1)
  • Yii2 (0)
  • Ubuntu (0)
  • Browser (2)
  • CURL (2)
  • Pjax (1)
  • CORS (7)
  • CSS (2)
  • Editor (1)
  • Life (5)
  • Function (12)
  • PHP 7 (2)
  • MySQL (5)
  • Redis (2)
  • PostgreSQL (6)
  • Markdown (1)
  • API (4)
  • 小程序 (1)
  • JavaScript (1)
  • HTTP (3)
  • SSH (1)
  • GoLang (1)
  • VPS (1)

置顶推荐

Laravel 框架中前端如何使用 CSRF Laravel 5.6 单设备登录 Laravel 5.6 使用 UUID CURL 类封装 Laravel Eloquent 必备的实用技巧 提高安全性的最佳 Nginx 配置 Vagrant SSH 的登录总结 Laravel 跨域解决方案 CORS 跨域的概念与 TP5 的解决方案 MySQL 千万级大数据 SQL 查询优化技巧详解 数据库 30 条军规 JavaScript 判断访问客户端是 PC 端还是移动端 PHP 的笛卡尔积算法实现 API 文档编写 - APIDOC Linux MySQL 定时备份并上传到 git 仓库 Laravel 5.5 之 Api Resource Laravel 实现文章浏览次数统计 如何在 Laravel 项目中使用 Swagger 构建 Api 文档 如何编写基于 Swagger-PHP 的 API 文档 网站加载动画 Markdown 语法说明 见过世面的人,从不说这3句话 PHP7 新特性 - 完结篇 阿里云 Redis 开发规范 Nginx 负载均衡设置 PHP 生成随机红包算法 规范的 README 需要哪些内容 PHP 代码规范之 PSR-2 Ubuntu 14/16 下的 Laravel LNMP 线上环境自动部署脚本 PHP 闭包 不会,找人教你就够了? PHP 新特性 - 命名空间

最新评论

    Githubxinwei
  • Githubxinwei2018-05-29 23:51:34
  • 在用 Algolia DocSearch ...中评论
  • Ellison`s Blog666
    ruoxiao-zh
  • ruoxiao-zh2018-03-06 12:52:29
  • 在细说浏览器输入URL后发生了什么中评论
    MissJiang
  • MissJiang2018-03-05 19:24:56
  • 在细说浏览器输入URL后发生了什么中评论
  • very good !!!
    ruoxiao-zh
  • ruoxiao-zh2018-03-04 08:04:19
  • 在使用 VPS 搭建 JetBrains ...中评论
  • 这个可以有

友情链接

Laravel China 社区 Codecasts EasyWechat Laravel 学院 YiiChina WebYang.NET 刘泓宾博客 Linux 运维笔记 风雪之隅 张宴的博客 泽林博客

  • 本博客主要用于分享日常学习、生活及工作的一些心得总结, 文章源自网络, 如涉及您的利益请联系管理员删除, 联系邮箱:ruoxiaozh@163.com

    Owned By 🍁 Ellison     

  • 有时候,需要回过头思忖一会儿才能把走过的路看清楚,于是惊异于它脉络的清晰。你可以从偶然性看到必然性,又得出性格决定命运、命运影响性格的结论。只是大多数时候,我们是行者,以不同的姿态走过人生,虽然时而回头看清来时的路,却未必能看懂归途。

无需注册,用以下帐号即可直接登录

  • github登录