此类居中,只要在在文字等元素包裹的父元素加上
text-align: center;
此类要在有宽度的前提下。设置左右margin为auto即可
div{
width:100px; //任意宽度
margin-left: auto;
margin-right: auto;
}
此类大致有两种思路可以实现
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>
多块状-内联水平居中:
①、单行内容
有的时候文字本身就是垂直居中的,因为文字上下方的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>
①、知道元素高度
.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
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 新特性 - 命名空间