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 ...
随机推荐
- [置顶] VB 中chr(10)、chr(13)和vblf、vbcr、vbcrlf的分别
1.共同点: chr(10):换行,相当于VBLF chr(13):回车,相当于VBCR chr(13)+chr(10):回车+换行,相当于VBCRLF cr是回车,只有回车,是到本行的最头上:lf是 ...
- Oracle执行计划——all_rows和first_rows(n) 优化器模式
0. 环境创建 SQL> create usertest identified by test 2 default tablespace users 3 temporary tablespace ...
- 学习微信小程序之css16常见布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [C#技术] .NET平台开源JSON库LitJSON的使用方法
一个简单示例: String str = "{’name’:’cyf’,’id’:10,’items’:[{’itemid’:1001,’itemname’:’hello’},{’itemi ...
- Android实现后台长期监听时间变化
1.首先我们的目的是长期监听时间变化,事实上应用程序退出. 通过了解我们知道注冊ACTION_TIME_TICK广播接收器能够监听系统事件改变,可是 查看SDK发现ACTION_TIME_TICK广播 ...
- URL具体解释
浏览器因特网资源:URL是浏览器寻找信息时所需的资源位置.通过URL.应用程序才干找到并使用共享因特网上大量的数据资源. 大部分URL都遵循一种标准的格式: ①HTTP协议(http://或者http ...
- 大数据笔记03:大数据之Hadoop的安装
1.安装Hadoop (1)准备Linux环境 (2)安装JDK (3)配置Hadoop 2.准备Linux环境 (1)我们用户可能都是使用Windows环境,一般用户都是先安装虚拟机,然后在虚拟机上 ...
- css中同时用头部引入和外部引入对同一个标签进行样式设置,哪一个优先级高。
这段是html中的代码 <!doctype html> <html lang="en"> <head> <meta charset=&qu ...
- 使用Application_Error捕获站点错误并写日志
Global.ascx页面使用以下方法即可捕获应用层没有try cath的错误 protected void Application_Error(Object sender, EventArgs e) ...
- Android开发手记(13) 几种Alertdialog的使用
本文主要讨论七种形式的AlertDialog,及其编写方法. 1.退出 在用户退出的时候提示用户是否退出,含有“确定”和“退出”两个按键. btnExit.setOnClickListener(new ...