css常用居中方式
一、水平居中
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常用居中方式的更多相关文章
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- CSS常用布局方式-两列布局、三列布局
CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素. 行内元素 和其他元素都在同一行 高,行高及外边距和内边距部分可以改变 宽度只与内容有关 行内元素只能容纳文本或者其他行内元素 常用内联元素:a,i ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
随机推荐
- jackson学习之九:springboot整合(配置文件)
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 系列文章汇总 jackson学习之一:基本信息 jac ...
- 2020牛客暑期多校训练营(第五场)B - Graph (异或 最小生成树 分治 Trie)
B - Graph 题目链接 每次操作不会改变两点之间的路径异或和 以 1 号点为起点,算出任意一点到 1 号点的异或值 dis[i](把该值当做 i 号点权值), 那么任意两点的异或值为 \(dis ...
- 搜索Ex (洛谷提高历练地)
搜索Ex P1120 小木棍 题意:不超过65根长度小于50的小木棍(是由一批等长木棍砍断得到的),求原始木棍的最小可能长度 分析:优化+减枝爆搜 搜索状态要记录当前尝试的已经填好的长度,当前尝试填的 ...
- 2019牛客暑期多校训练营(第五场)C - generator 2 (BSGS)
题目链接 题意: 给定\(n,x_0,a,b,p\),有递推式\(x_i = (a \cdot x_{i-1} +b)\%p\). 有\(Q\)个询问,每次询问给定一个\(v\),问是否存在一个最小的 ...
- 最短路径问题---Floyed(弗洛伊德算法),dijkstra算法,SPFA算法
在NOIP比赛中,如果出图论题最短路径应该是个常考点. 求解最短路径常用的算法有:Floyed算法(O(n^3)的暴力算法,在比赛中大概能过三十分) dijkstra算法 (堆优化之后是O(MlogE ...
- Codeforces Round #655 (Div. 2) A. Omkar and Completion
题目链接:https://codeforces.com/contest/1372/problem/A 题意 构造一个大小为 $n$ 的数组 $a$,要求满足 $1 \le a_i \le n$,且不存 ...
- python连接mysql数据库,并进行添加、查找数据
1.删除MySQL数据表中的记录 DELETE FROM table_name WHERE condition; python操作mysql1数据库 import pymysql # 连接mysql数 ...
- 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 ...
- PowerShell随笔9--- call
很多时候我们需要在一个脚本文件执行另外一个脚本文件,比如我们有一个Test.ps1文件 我们有以下2种方法: Invoke-Expression (&) 我们可以看到,Test.ps1中的代码 ...
- RSA 加密解密使用实例
http://www.dtmao.cc/news_show_692109.shtml 本文不讨论RSA加密解密本身,只记录使用方法及遇到的坑,RSA原理及注意事项可在网上查找. 背景:公司的一个需求, ...