一、水平居中

1.内联元素

父级元素加 text-align: center 即可

html

<div class="container">
<a>内联元素</a>
</div>

css

.container {
text-align: center;
}

2.块级元素

给定宽度,然后 margin 上下为 0,左右 auto 即可

html

<div class="container">
块级元素
</div>

css

.container {
width: 200px;
margin: 0 auto;
}

3.多个块级元素

第一种方式

子元素设置成内联,父级元素加 text-align:center即可

html

<div class="container">
<div>
第一个块
</div>
<div>
第二个块
</div>
<div>
第三个块
</div>
</div>

css

.container {
text-align: center;
}
.container div {
display: inline-block;
}

第二种方式

利用 flexbox 弹性布局

html

<div class="container">
<div>
第一个块
</div>
<div>
第二个块
</div>
<div>
第三个块
</div>
</div>

css

.container {
display: flex;
justify-content: center;
}

二、垂直居中

1.内联元素

第一种方式

设置 padding

html

<div class="container">
需要垂直居中的内容(内联)
</div>

css

.container {
padding: 40px 40px;
}

第二种方式

按照父级元素的高度,设置子元素的行高

html

<div class="container">
需要垂直居中的内容(内联)
</div>

css

.container {
height: 100px;
line-height: 100px;
}

第三种方式

利用 flexbox,父级元素需给定高度

html

<div class="container">
<a href="">爷要垂直居中</a>
<a href="">爷要垂直居中</a>
<a href="">爷要垂直居中</a>
</div>

css

.container {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}

2.块级元素

第一种方式

父元素相对定位 position:relative,子元素绝对定位 position: absolute

html

<div class="container">
<div>爷要垂直居中</div>
</div>

css

.container {
position: relative;
width: 200px;
height: 200px;
}
.container div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

第二种方式

利用 flexbox

html

<div class="container">
<div>爷要垂直居中</div>
</div>

css

.container {
width: 200px;
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}

三、水平和垂直居中

第一种方式

父元素相对定位 position:relative,子元素绝对定位 position: absolute

html

<div class="container">
<div>爷要水平和垂直居中</div>
</div>

css

.container {
position: relative;
width: 200px;
height: 200px;
}
.container div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: red;
}

第二种方式

使用 flexbox

html

<div class="container">
<div>我要垂直居中啊a我要垂直居中啊a我要垂直居中啊</div>
</div>

css

.container {
width: 200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.container div {
width: 100px;
height: 100px;
}

最后说一点,如果具体宽高已知,给定具体数值就可以直接实现

The_End

css常用居中方式的更多相关文章

  1. css常用居中

    对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...

  2. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  3. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

  4. 各种div+css居中方式调整(转载)

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  5. 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器

    CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...

  6. CSS实现居中的方式

    在介绍居中方式之前,简单介绍一下行内元素和块级元素. 行内元素 和其他元素都在同一行 高,行高及外边距和内边距部分可以改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 常用内联元素:a,i ...

  7. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  8. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  9. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

随机推荐

  1. C++多元组tuple使用方法?你熟悉吗?快来看看吧

  2. Linux换行符和Windows换行符的区别与转换

    不同系统文本文件的行尾换行符不同:    Windows为一个回车'\r'(CR或^M)和一个换行'\n'(NL或LF)(括号内是其它显示方法)    Linux为一个换行'\n'    Mac为一个 ...

  3. 关于KMP算法的理解

    上次因为haipz组织的比赛中有道题必须用到KMP算法,因此赛后便了解了下它,在仔细拜读了孤~影神牛的文章之后有种茅塞顿开的感觉,再次ORZ. 附上链接http://www.cnblogs.com/y ...

  4. POJ - 1743 Musical Theme (后缀数组)

    题目链接:POJ - 1743   (不可重叠最长子串) 题意:有N(1<=N<=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一个重复的子串,它需要 ...

  5. Smith Numbers POJ - 1142 暴力递归枚举

    题意: 给你一个数x,把这个分解成素数之积(假设是x1*x2*x3),如果   x的每一数位的和   等于  x1每一数位的和加上x2每一数位的和加上x3每一数位的和,那么他就是题目要找的数 示例: ...

  6. Python3.7.9+Locust1.4.3版本性能测试工具案例分享

    一.Locust工具介绍 1.概述 Locust是一款易于使用的分布式负载测试工具,完全基于事件,使用python开发,即一个locust节点也可以在一个进程中支持数千并发用户,不使用回调,通过gev ...

  7. K8S(02)管理核心资源的三种基本方法

    系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 管理k8s核心资源的三种基本方法: 目录 系列 ...

  8. Python+argparse+notebook

    argparse"应用"于jupyter-notebook中 args.xx =======================>> args["xx" ...

  9. Front End Frameworks Trending 2021

    Front End Frameworks Trending 2021 Front End Frameworks https://2019.stateofjs.com/front-end-framewo ...

  10. Mac 外接 Dell 4K 显示器字体模糊解决办法

    Mac 外接 Dell 4K 显示器字体模糊解决办法 mac mini mbp 2020 refs https://zhuanlan.zhihu.com/p/52100804 xgqfrms 2012 ...