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 ...
随机推荐
- windows10与linux进行ftp遇到550 Failed to change directory及553 Could not creat file
第一个原因: 没有权限,可以使用带有l参数的ls命令来看文件或者目录的权限 ls -l 解决:给本地用户添加一个可写权限 chmod +w /home/student ##给对应的本地用户添加一个可写 ...
- GPLT L2-006 树的遍历(二叉树)
题意: 给定一棵二叉树的后序遍历和中序遍历,请你输出其层序遍历的序列.这里假设键值都是互不相等的正整数. 思路: 后序遍历序列 = 左子树遍历序列 + 右子树遍历序列 + 根节点. 中序遍历序列 = ...
- Codeforces Global Round 7 D1. Prefix-Suffix Palindrome (Easy version)(字符串)
题意: 取一字符串不相交的前缀和后缀(可为空)构成最长回文串. 思路: 先从两边取对称的前后缀,之后再取余下字符串较长的回文前缀或后缀. #include <bits/stdc++.h> ...
- Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier
题目链接:XORwice 题意:给你两个数a.b.求一个数x,使得((a异或x)+(b异或x))这个值最小,输出最小那个x 题解: 输出(a|b)-(a&b)就行(猜了一手 代码: #incl ...
- 要习惯用vector代替数组
cin>>n>>m; vector<int>a(n),b(m); 或者: vector<int>a(n,0),b(m,0);
- [HDU-5172] 单点查询线段树
题意: 给你一个长度为n的数组v[],有m次询问,问你在区间[L,R]中是否包含区间[1,R-L+1]的全部数字,如果是输出YES,否则输出NO 题解: 区间[1,R-L+1]与区间[L,R]的长度一 ...
- 考研路茫茫——单词情结 HDU - 2243 AC自动机 && 矩阵快速幂
背单词,始终是复习英语的重要环节.在荒废了3年大学生涯后,Lele也终于要开始背单词了. 一天,Lele在某本单词书上看到了一个根据词根来背单词的方法.比如"ab",放在单词前一般 ...
- WPF 无法对元素“TextBox”设置 Name 特性值“TB2”
错误信息 无法对元素"TextBox"设置 Name 特性值"TB2"."TextBox"在元素"UserControl1&quo ...
- python--通过ocr对数据可视化视频还原为csv,进行简单的分析
见github https://github.com/TouwaErioH/Machine-Learning/tree/master/video/video 题目描述: source https:// ...
- 【非原创】sg函数模板
学习博客:戳这里 解题模型: 1.把原游戏分解成多个独立的子游戏,则原游戏的SG函数值是它的所有子游戏的SG函数值的异或. 即sg(G)=sg(G1)^sg(G2)^...^sg(Gn) ...