巧用CSS居中未知高度的块元素
在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你!
1. position
.parent {
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
width: 100px;
height: 50%;
top:;
left:;
right:;
bottom:;
margin: auto;
background-color: red;
}
2. flex
.parent {
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.child {
width: 100px;
height: 50%;
background-color: red;
}
3. translate
.parent {
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 50%;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
4. calc
.parent {
width: 200px;
height: 200px;
margin: auto;
border: 1px solid red;
position: relative;
}
.child {
width: 100px;
height: 50%;
background-color: red;
position: absolute;
left: -webkit-calc(50% - 25%);
left: -moz-calc(50% - 25%);
left: -ms-calc(50% - 25%);
left: calc(50% - 25%);
top: -webkit-calc(50% - 25%);
top: -moz-calc(50% - 25%);
top: -mz-calc(50% - 25%);
top: calc(50% - 25%);
}
本文介绍的四种方法全部由以下实例验证通过,且加了兼容性前缀,可以直接复制使用,建议使用时可以按顺序考虑,具体可看个人习惯,反正我是这个顺序,因为可以少写很多兼容性前缀,大家可以放心大胆的粘贴使用了,拿贴不谢!
布局如下:
效果如下:
巧用CSS居中未知高度的块元素的更多相关文章
- CSS实现未知高度图文混合垂直居中
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-06-26) CSS实现未知高度图文混合垂直居中,阅读CSS实现未知高度图文混合垂直居中. IE6,IE7,FF3测试通过 ...
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS解决未知高度垂直居中
尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari ...
- css实现未知高度水平垂直居中
页面设计中,经常需要实现元素的水平垂直居中,css实现的方法有很多(列如: margin: auto.position定位.css表达式calc().使用css预处理.table等都可以实现水平居中) ...
- CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- 用CSS让未知高度内容垂直方向居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- CSS之未知高度img垂直居中
测试代码如下:(能够水平居中,通过text-align:center实现) <style>.box{ width:800px;height:600px;border:2px solid # ...
- css实现固定高度及未知高度文字垂直居中的完美解决方案
在工作当中我们经常碰到类似于"固定高度文字垂直居中及未知高度垂直居中问题",或者 "图片垂直居中问题",而我们最容易会想到使用表格来垂直居中,或者如果是单行文字 ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
随机推荐
- Java开发小技巧(二):自定义Maven依赖
前言 我们在项目开发中经常会将一些通用的类.方法等内容进行打包,打造成我们自己的开发工具包,作为各个项目的依赖来使用. 一般的做法是将项目导出成Jar包,然后在其它项目中将其导入,看起来很轻松,但是存 ...
- 让你变懒的 Android Studio Live Templates
俗话说.不想偷懒的程序猿不是好程序猿.那么今天就教大家偷懒下! 先举个样例.我们在 Android 开发中输入 Toast ,然后会有例如以下例如以下的高速操作: 是不是非常方便? 有同学问,这不就是 ...
- hdu 4409 Family Name List(LCA&有坑点)
Family Name List Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Caused by: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Query was empty
1 错误描写叙述 at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(Invocable ...
- Leetcode 高精度 Plus One
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie Plus One Total Accepted: 17614 Total Submissio ...
- springboot(十五):springboot+jpa+thymeleaf增删改查示例
这篇文章介绍如何使用jpa和thymeleaf做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个demo来试试它的效果,越简单越容易上 ...
- JDK源码阅读(1)_简介+ java.io
1.简介 针对这一个版块,主要做一个java8的源码阅读笔记.会对一些在javaWeb中应用比较广泛的java包进行精读,附上注释.对于容易混淆的知识点给出相应的对比分析. 精读的源码顺序主要如下: ...
- 快速自检电脑是否被黑客入侵过(Linux版)
之前写了一篇快速自检电脑是否被黑客入侵过(Windows版), 这次就来写写Linux版本的. 前言 严谨地说, Linux只是一个内核, GNU Linux才算完整的操作系统, 但在本文里还是用通俗 ...
- HTML列表的常用属性及其应用
首先列表分成有序和无序分别是<ol><ul>,无序的比较简单,看个例子: <html> <body> <h4>一个无序列表:</h4& ...
- xamarin android checkbox自定义样式
xamarin android checkbox自定义样式 在drawable文件在新建checkbox_bg.xml文件 <?xml version="1.0" encod ...