css设置水平垂直居中
关于CSS设置水平以及垂直居中的解决方案
想要水平居中?
内联的元素(文字)?
.center-children { text-align: center;}
块级元素?
.center-me { margin: 0 auto;}
如果有多个块级元素呢?
.inline-block-center { text-align: center; } .inline-block-center div { display: inline-block; text-align: left; } .flex-center { display: flex; justify-content: center; }
想要垂直居中?
内联的元素?
- 如果只有一行的话,可以设置上下内边距为相同的值。
- 如果是多行文本的话,可以模拟表格。
.center-table { display: table; height: 250px; background: white; width: 240px; margin: 20px; } .center-table p { display: table-cell; margin:; background: black; color: white; padding: 20px; border: 10px solid white; vertical-align: middle; } .flex-center-vertically { display: flex; justify-content: center; flex-direction: column; height: 400px; } 块级元素? 知道元素高度? .parent { position: relative; } .child { position: absolute; top: 50%; height: 100px; margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */ }
- 元素高度未知?
.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }
- flex布局
.parent { display: flex; flex-direction: column; justify-content: center; }
原文:
css设置水平垂直居中的更多相关文章
- CSS实现水平|垂直居中漫谈
利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS制作水平垂直居中对齐
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 你知道CSS实现水平垂直居中的第10种方式吗?
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- css实现水平 垂直居中
css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS制作水平垂直居中对齐 多种方式各有千秋
作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...
- css各种水平垂直居中
css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...
- CSS如何水平垂直居中?
CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...
随机推荐
- 定时执行程序-Quartz简单实例
1.加jar包:Quartz自己quartz-1.8.3.jar和依赖包commons-logging.jar .slf4j-log4j12-1.5.10.jar .slf4j-api-1.5.10 ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux性能分析命令和性能观察工具
- Cocoa Touch 层
Cocoa Touch层包含创建 iOS应用程序所需的关键框架.上至实现应用程序可视界面,下至与高级系统服务交互,都需要该层技术提供底层基础.在开发应用程序的时候,请尽可能不要使用更底层的框架,尽可能 ...
- Android-Uiautomator:[5]停止monkey测试
方法/步骤 1 其实停止很简单,无非就是结束掉monkey的进程即可 如何停止呢 2 ps命令 查找uiautomator的进程 打开cmd命令行窗口 输入: adb shell ps | grep ...
- duilib DirectUI库里面的一个简单的例子RichListDemo
1.首先来看这里的CRichListWnd 已经不再是从CWindowWnd继承了 classCRichListWnd:publicWindowImplBase 从WindowImplBase中,可以 ...
- 关于“无法解析的外部符号”和“该符号在函数_wmain 中被引用”的问题
在VS2008和opendv的环境下: error LNK2019: 无法解析的外部符号_cvDestroyWindow,该符号在函数_wmain 中被引用 error LNK2019: 无法解析的外 ...
- 命名空间引用问题 包括找不到ConfigurationManager 这个类
因为SqlConnection类是属于 System.Data.SqlClient命名空间下的, 所以命名空间引用的时候需要加上 System.Data.SqlClient,代码如下: ...
- Java基础知识强化73:正则表达式之分割功能
1. 分割功能: 使用String的split方法,split方法:根据给定正则表达式的匹配拆分字符串.如下: public String[] split(String regex): 2. 案例: ...
- Chapter 2. Overview gradle概览
2.1. Features //gradle特性 Here is a list of some of Gradle's features. Declarative builds and build-b ...