day07——css布局解决方案之居中布局
转行学开发,代码100天——2018-03-23
1.水平居中
- 使用inline-block + text-align方法
先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中
即对子框元素:display:inline-block;对父框元素设置:text-align:center;
<div class="parent">
<div class="child">demo</div> </div>
.parent
{
width: 100px;
height: 100px;
text-align: center;
border:1px solid red;
}
.child
{
display: inline-block;
}
兼容性好,能适应ie6,ie7
- 使用table+margin方法
先将子框设置为块级表格显示,即display:table; 再设置子框居中margin:0 auto;
.child
{
display: table;
margin: 0 auto;
}
只设置了子框元素,支持ie8以上;ie6,ie7浏览器中可利用table标签
<table class="parent">
<td class="child">
demo
</td>
</table>
- 使用absolute+transform方法
将子框设置为绝对位置,移动子框,使子框左侧距离相对框左侧边框距离为相对边框宽度的一半,再通过向左移动子框的一半宽度以达到水平居中。设置父框为相对定位。
父框:position:relative
子框: position:absolute left:50%;transform:translateX(-50%);
.parent
{
position: relative;
border:1px solid red;
width: 300px;
height: 300px;
}
.child
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
居中元素不会对其他元素产生影响,但是transform属于CSS3,兼容性有一定的影响。
- 利用flex+margin
将子框转换为flex item,再设置子框居中。
即父框: display:flex;
子框:margin:0 auto;
.parent
{
display: flex;
border:1px solid red;
width: 100%;
height: 300px;
}
.child
{
margin: 0 auto;
}
缺点是不支持低版本
- 利用flex+justify-content
将父框设置为display:flex;justify-content:cneter;
.parent
{
display: flex;
justify-content: center;
border:1px solid red;
width: 100%;
height: 300px; }
只需设置父框即可,但不支持ie6,ie7低版本。
2.垂直居中
- 使用teble-cell+vertical-slign方法
即将父框转化为一个表格单元格显示,类似于<td>/<th>,再通过设置单元格内容垂直居中以实现垂直居中。
即父框:display:table-cell;
子框:vertical-align:middle;
.parent
{
width: 100%;
height: 300px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
- 使用absolute+transform方法
类似于水平居中原理,即先将父框设置为position:relative;再将子框设置为position:absolute;top:50%;transform:translateY(-50%);
.parent
{
position: relative;
width: 100%;
height: 300px;
border:1px solid red;
}
.child
{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
- 使用flex+align-items方法
将父框定位设置为display:flex;设置内容居中,text-align:center;
3.水平垂直居中
- 使用absolute+transform方法,及将水平居中和垂直居中相结合。
设置父框:position:relative;
子框:position:absolute; left:50%;top50%;transform:translate(-50%,-50%);
.parent
{
position: relative;
}
.child
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
- 使用inline-block+text-align+table-cell+vertical-align
父框:display:table-cell;text-align:center;vertical-align:middle;
子框:display:inline-block;
由于该设置方法将内容表格化,其实并不是真正全局的水平垂直居中。
.parent
{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height:300px;
}
.child
{
display: inline-block;
}
- 使用flex+justify-content+align-items
设置父框:
display: flex;
justify-content: center;
align-items: center;
对于全局页面而言是水平垂直居中
.parent
{ width: 100%;
height:300px;
display: flex;
justify-content: center;
align-items: center;
}
以上是设置居中布局常用的方法,可选择使用。
day07——css布局解决方案之居中布局的更多相关文章
- CSS 3层嵌套居中布局
<html> <head> <style type="text/css"> .root{ background-color: red; widt ...
- css CSS常见布局解决方案
CSS常见布局解决方案说起css布局,那么一定得聊聊盒模型,清除浮动,position,display什么的,但本篇本不是讲这些基础知识的,而是给出各种布局的解决方案.水平居中布局首先我们来看看水平居 ...
- 前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化
04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...
- Css学习总结(3)——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局 水平居中 子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
- CSS布局解决方案(终结版)
作者:无悔铭 https://segmentfault.com/a/1190000013565024 前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环.在页面框架的搭建之中,又有居中布局.多 ...
- day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
- CSS居中布局总结【转】
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- CSS居中布局总结
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- css总结2:Flex 布局教程:Flex 语法(转)
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
随机推荐
- C语言第七周作业
每个单词的最后一个字母改成大写 函数fun的功能是:将p所指字符串中每个单词的最后一个字母改成大写.(这里的"单词"是指由空格隔开的字符串). 函数接口定义: void fun( ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
- MySQL的练习
mysql登录:方法1:使用Command Line Client登录,缺点:不显示报错信息 方法2:使用cmd登录(cmd的常用:查看ip地址:ipcongfi-----定时关机:shutdown ...
- 如何在Web工程中实现任务计划调度
转载自: http://www.oschina.net/question/146385_37793?sort=time 下面就Servlet侦听器结合Java定时器来讲述整个实现过程.要运用Servl ...
- npm搭建vue全过程
如何在Window下安装node\cnpm,并安装vue.js,创建项目 参考链接:https://blog.csdn.net/Corey_mengxiaodong/article/details/8 ...
- 多个nginx之间如何实现反向代理和负责均衡
1)nginx反向代理: http { upstream routeadmin { ip_hash; server 127.0.0.1:9201 weight= ...
- 帝国CMS自定义页面的添加与目录式链接的处理
需求: 1.将某一本地前端自定义页面模板,导入到帝国系统,应用到网站 2.将导入的页面在站点中打开为目录式链接 www.abc.com/softlink/ 环境: 1.windows服务器 2.帝国C ...
- openstack stein部署手册 8. neutron-api
# 建立数据库用户及权限 create database neutron; grant all privileges on neutron.* to neutron@'localhost' ident ...
- Matlab 多个版本的安装包下载、安装和激活教程 + 多套数学建模视频教程
目录 1. 关键词 1.1. 说明 2. 下载地址 2.1. OneDrive高速云盘 2.1.1. 多版本的安装包 2.1.2. 多套数学建模的视频教程 2.2. 百度云 3. 安装教程 1. 关键 ...
- python基础——对时间进行加减
在datetime模块中有一个timedelta这个方法,它代表两个datetime之间的时间差.. In [42]: datetime.datetime.now().strftime('%Y-%m- ...