CSS布局之居中

简介: CSS布局之居中本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法水平居中1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设置,会对子元素生效。

CSS布局之居中
本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法
水平居中

1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设置,会对子元素生效。此方法对,inline、inline-block、inline-table、inline-flex都有效。

.box{
text-align:center;
}
此外,如果块级元素包着一个块级元素,那么我们可以设置外部盒子text-align:center;给内部盒子设置display:inline-block;这样也可以使得内部元素居中。但要注意的是,内部盒子已经设置了display:inline-block,就不可以再设置其他的display,所以最好不要使用这种方法。
复制代码






复制代码

2.块级元素水平居中

使用margin居中

margin:0 auto;但是使用这种方法,要记得给元素设置宽度,否则不会生效

使用absolute+transform

absolute定位,左 50%,然后使用transform向左移动50%;

3.浮动元素水平居中

已知宽度,通过子元素设置relative+负margin  

复制代码
.child{
width:200px;
float:left;
position:relative;
left:50%;
margin:-100px;
}
复制代码
未知宽度,父子元素都用相对定位

复制代码
.parent{
float:left;
postion:relative;
left:50%;
}
.child{
float:left;
position:relative;
right:50%;
}
复制代码
父元素相对于左定位50%;且因为,父元素的宽度是由子元素撑起来的,所以当子元素相对于自身右定位50%时,水平居中

示例 当我们把child的定位取消时

打开child的相对定位时

4.绝对定位元素水平居中 这种方式通过子元素的绝对定位,外加margin:0 auto;

复制代码
.parent{
position:relative;
}
.child{
postion:absolute;
width:100px;
height:100px;
background:red;
margin:0 auto;
left:0;
right:0;
}
复制代码
垂直居中
1.单行内联元素垂直居中 这种方法适合对单行文本的垂直居中,比如应用在顶部菜单栏中

.parent{
height:100px;
line-height:100px;
}
2.块级元素垂直居中

使用absolute+负margin

复制代码
.parent{
position:relative;
}
.child{
height:100px;
position:absolute;
top:50%;
margin-top:-50px;
}
复制代码
使用absolute+tranform

复制代码
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
transform:translateY(-50%);
}
复制代码
水平垂直居中
可以参考上面的水平居中和垂直居中的方法,结合起来就可以了。
原文地址https://www.cnblogs.com/seanxushuo/p/11397849.html

相关文章
|
3月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
3月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
4月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
97 4
|
4月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
3月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
5月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
6月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
271 3
|
6月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
74 3
|
5月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。

热门文章

最新文章