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 ...
随机推荐
- AFNetworking (3.1.0) 源码解析 <五>
这次主要开始讲解一下文件夹Serialization下的类AFURLRequestSerialization. AFURLRequestSerialization类遵守`AFURLRequestSer ...
- Unity3D基础学习 利用NGUI的Texture播放视频
利用NGUI播放视频,首先你得导入你的视频 你的电脑中必须安装QuickTime软件,没有,去下一个,如果是Windows系统,安装完之后重启. 接下来转换你的视频格式,如果你的视频在QuickTim ...
- .NET页面301跳转处理
//301跳转Response.Status = "301 Moved Permanently";Response.AddHeader("Location", ...
- iOS UITextField 设置内边距
[self.yourTextField setValue:[NSNumber numberWithInt:5] forKey:@"_paddingTop"]; [self.your ...
- 安卓(android)建立项目时失败,出现Android Manifest.xml file missing几种解决方法?(总结中)
安卓(android)建立项目时失败.出现AndroidManifest.xml file missing几种解决方法?(总结中) Eclipse新建项目.遇到这种问题.注意例如以下: 1.文件名称最 ...
- 经典C面试题
12个有趣的C语言面试题 面试题C 摘要:12个C语言面试题,涉及指针.进程.运算.结构体.函数.内存,看看你能做出几个! 1.gets()函数 问:请找出以下代码里的问题: #include< ...
- C# List集合转Json字符串示例代码
将list集合转换为Json字符串简单实现代码: public static string GetJosn(List<CalendarInfo> list) { string jsonSt ...
- (转) Android平台上关于IM的实践总结
前言 IM通信在互联网发展到现在已经是码农的世界里人尽皆知的技术,特别在当下移动互联网迅猛发展的时代这种技术的开发也更加火热,其中老牌的代表作就有QQ和MSN,和最近新崛起的微信,默默,易信,来往等眼 ...
- VS快速定位文件、代码插件——DPack
之前用Myeclipse开发一个Java项目,发现其中“Open Resource”(Ctrl+Shirft+R)的功能比较好用,回到.Net后就找了找VS相应的功能,试了几个后觉得Dpack比较好用 ...
- mysql sql语句分析
1. SELECT a.id ,b.order_id,b.attr FROM tourist_order a LEFT JOIN order_attr b ON ...