一、水平居中

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. jackson学习之九:springboot整合(配置文件)

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 系列文章汇总 jackson学习之一:基本信息 jac ...

  2. 2020牛客暑期多校训练营(第五场)B - Graph (异或 最小生成树 分治 Trie)

    B - Graph 题目链接 每次操作不会改变两点之间的路径异或和 以 1 号点为起点,算出任意一点到 1 号点的异或值 dis[i](把该值当做 i 号点权值), 那么任意两点的异或值为 \(dis ...

  3. 搜索Ex (洛谷提高历练地)

    搜索Ex P1120 小木棍 题意:不超过65根长度小于50的小木棍(是由一批等长木棍砍断得到的),求原始木棍的最小可能长度 分析:优化+减枝爆搜 搜索状态要记录当前尝试的已经填好的长度,当前尝试填的 ...

  4. 2019牛客暑期多校训练营(第五场)C - generator 2 (BSGS)

    题目链接 题意: 给定\(n,x_0,a,b,p\),有递推式\(x_i = (a \cdot x_{i-1} +b)\%p\). 有\(Q\)个询问,每次询问给定一个\(v\),问是否存在一个最小的 ...

  5. 最短路径问题---Floyed(弗洛伊德算法),dijkstra算法,SPFA算法

    在NOIP比赛中,如果出图论题最短路径应该是个常考点. 求解最短路径常用的算法有:Floyed算法(O(n^3)的暴力算法,在比赛中大概能过三十分) dijkstra算法 (堆优化之后是O(MlogE ...

  6. Codeforces Round #655 (Div. 2) A. Omkar and Completion

    题目链接:https://codeforces.com/contest/1372/problem/A 题意 构造一个大小为 $n$ 的数组 $a$,要求满足 $1 \le a_i \le n$,且不存 ...

  7. python连接mysql数据库,并进行添加、查找数据

    1.删除MySQL数据表中的记录 DELETE FROM table_name WHERE condition; python操作mysql1数据库 import pymysql # 连接mysql数 ...

  8. DNA Sequence POJ - 2778 AC自动机 && 矩阵快速幂

    It's well known that DNA Sequence is a sequence only contains A, C, T and G, and it's very useful to ...

  9. PowerShell随笔9--- call

    很多时候我们需要在一个脚本文件执行另外一个脚本文件,比如我们有一个Test.ps1文件 我们有以下2种方法: Invoke-Expression (&) 我们可以看到,Test.ps1中的代码 ...

  10. RSA 加密解密使用实例

    http://www.dtmao.cc/news_show_692109.shtml 本文不讨论RSA加密解密本身,只记录使用方法及遇到的坑,RSA原理及注意事项可在网上查找. 背景:公司的一个需求, ...