CSS--居中方式总结
一、水平居中方法
1.行内元素、字体的水平居中
1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;
<style>
p{
/*关键*/
text-align:center;
}
ul{
/*关键*/
text-align:center:
}
/*这里li设置inline-block*/
.item{
/*关键*/
display:inline-block;
}
</style>
<!--字体-->
<p>I am ry</p>
<!--行内元素-->
<ul>
<li class="item">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
</ul>
2.块元素的水平居中
1.使用margin实现水平居中
将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中
<style>
*{
margin:0;
padding:0;
}
.box1{
height:300px;
background:blue;
}
.item1{
/*关键，margin-left，margin-right设置为auto*/
margin: 0 auto;
width: 100px;
height: 100px;
background:red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
</body>
2.使用position+margin-left实现水平居中
定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。
<style>
.box2{
position:relative;
height:300px;
background:blue;
}
.item2{
/*关键 相对定位*/
position: relative;
/*关键*/
left: 50%;
/*关键*/
margin-left:-50px;
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class="box2">
<div class="item2"></div>
</div>
</body>
3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。
块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。
<style>
.box3{
/* 关键，对于行内元素水平居中 */
text-align: center;
}
.item3{
/* 关键，将块元素设置成行内块接元素 */
display:inline-block;
width:100px;
height: 100px;
background:red;
}
</style>
<body>
<div class="box3">
<div class="item3"></div>
<div class="item3"></div>
<div class="item3"></div>
<div class="item3"></div>
</div>
</body>
二、垂直居中
1.行内元素或者文字（单行情况）
1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可
<style>
.text{
height:100px;
line-height:100px;
border:1px solid red;
}
</style>
<body>
<div class="text">
we dont talk anymore
</div>
</body>
2.使用padding（top,bottom）通过增加内边距来实现垂直的居中
<style>
.ctext{
/*关键*/
padding-top:30px;
padding-bottom:30px;
border:1px solid red;
}
</style>
<body>
<div class="ctext">确认过眼神，我遇上对的人</div>
</body>
2.行内元素或者文字（多行情况）
1.照样可以使用padding（top 和 bottom）
2.对父元素设置display:table-cell 和 vertical-align:middle
<style>
.box{
/* 将其变成单元格的形式 */
display: table-cell;
/* width:100px; */
height:300px;
border:1px solid red;
/* 设置内联元素的垂直对齐的方式 */
vertical-align: middle;
}
</style>
<body>
<div class="box">
<span>how to love</span><br>
<span>I knoe I need somebody</span><br>
<span>I know I need somebody</span><br>
<span>pary for me</span>
</div>
</body>
3.块元素垂直居中
1.确定宽高的情况
使用position 和 margin-top配合
<style>
*{
margin:0;
padding:0;
}
/* 父元素 */
.parent{
position:relative;
height:400px;
border: 1px solid blue;
}
/* 子元素 */
.child{
/* position */
position: relative;
/* 距离顶部50% */
top:50%;
/* 再用margin-top 向上调子容器一半高度，则刚好子元素中心对准父元素中心 */
margin-top:-100px;
height:200px;
border:1px solid red;
}
</style>
<body>
<div class="parent">
parent
<div class="child">
child
</div>
</div>
</body>
2.对于未知宽高的
使用transform 的 translateY(-50%) 向上平移自身一半
<style>
.parent2{
position: relative;
background:blue;
height:400px;
}
.child2{
position: relative;
top:50%;
transform: translateY(-50%);
background: red;
}
</style>
<div class="parent2">
parent2
<div class="child2">child2</div>
</div>
3.使用flex布局
<style>
.parent3{
/*关键flex*/
display:flex;
display: -webkit-flex;
/* 对齐排列居中 */
justify-content:center;
/* 排列方向垂直 */
flex-direction:column;
height:400px;
background:yellow;
}
.child3{
height:100px;
}
</style>
<body>
<!-- flexbox -->
<div class="parent3">
<div class="child3"></div>
</div>
</body>
三、水平且垂直居中
1.position 和 margin 配合
<style>
*{
margin: 0 ;
padding: 0 ;
}
.box1{
position:relative;
height:400px;
background:blue;
}
.item1{
/*关键*/
position: absolute;
top: 50%;
left: 50%;
margin-top:-50px;
margin-left:-50px;
width:100px;
height:100px;
background: red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
</body>
2.使用flex布局
同时设置两条居中属性 justify-content 和 align-items
<style>
.box2{
display: flex;
/*关键*/
justify-content: center;
/*关键*/
align-items: center;
height:300px;
background:yellow;
}
.item2{
width:50px;
height:50px;
background:red;
}
</style>
<body>
<div class="box1">
<div class="item1"></div>
</div>
<div class="box2">
<div class="item2"></div>
</div>
</body>
本篇是个人笔记，可经常看看。向前走，也别忘记要多回顾
确认过眼神，我遇上对的人
Ry（元）
CSS--居中方式总结的更多相关文章
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 15种css居中方式
1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), ...
- css居中方式总结
方法一: line-height <div class="vertical" style="width:200px;height:200px;border:2px ...
- 【基础】这15种CSS居中的方式，你都用过哪几种？
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 第212天：15种CSS居中的方式，最全了
CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...
- CSS居中的常用方式以及优缺点
前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
随机推荐
- Android 上传文件到 FTP 服务器
实现背景 近期接触到一个需求,就是将文件从Android系统上传到FTP服务器,虽然之前接触过FTP服务器,了解基本的使用流程,但是将此流程从使用习惯转化为代码实现还是有一定难度的.但是基本的流程还是 ...
- tar与压缩详解
.gz gzip gunzip(gzip -d) .zip .rar .bz2 gzip压缩文件不保留原文件 , 不能压缩目录 gzip filename.x 用gzip压缩文件 gun ...
- OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 6.在计算节点上安装并配置计算服务Nova
安装和配置计算节点这个章节描述如何在计算节点上安装和配置计算服务. 计算服务支持几种不同的 hypervisors.为了简单起见,这个配置在计算节点上使用 :KVM <kernel-based ...
- .NET手记-为ASP.NET MVC程序集成Autofac
MVC Autofac总是会紧跟最新版本的ASP.NET MVC框架,所以文档也会一直保持更新.一般来讲,不同版本的框架集成Autofac的方法一般不变. MVC集成需要引用 Autofac.Mvc5 ...
- python（32）——【shelve模块】【xml模块】
一. shelve模块 json和pickle模块的序列化和反序列化处理,他们有一个不足是在python 3中不能多次dump和load,shelve模块则可以规避这个问题. shelve模块是一个简 ...
- PCA历程详细python代码（原创）
#PCA主成分分析,原文为文末的链接,代码为自己亲自手码 def cov_out1(dx,dy): #第一步:求解x,y各自的均值 mean_x=0 mean_y=0 for i in range(l ...
- Linux学习笔记之十一————Linux常用服务器构建之ssh和scp
一.ssh 1.ssh介绍 SSH为Secure Shell的缩写,由 IETF 的网络工作小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议. ...
- 使用SonarCloud对.NET Core项目进行静态代码分析
本文将介绍如何使用SonarCloud进行.NET Core项目的静态代码分析.SonarCloud是SonarQube提供的基于云的版本,特别针对于开源项目是免费的. 首先,在sonarcloud. ...
- lua脚本在游戏中的应用
为什么要在游戏中使用脚本语言? 要解释这个问题首先我们先来了解一下脚本语言的特性: 学习门槛低,快速上手 开发成本低,可维护性强 动态语言,灵活性高 相对于C/C++这类高复杂性.高风险的编译型语言来 ...
- ZooKeeper概念与应用
Zookeeper是开源的分布式协调服务,提供了分布式数据一致性的解决方案. Zookeeper 可用作配置中心和分布式锁服务,在 Dubbo.Kafka.Spark等分布式集群上得到广泛应用. ZN ...