最近在学关系型数据库相关，mysql 和 postgre,捎带着学了 php，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 sql 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？
<!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>Title</title><br></head><br><body><br><style><br> .container{<br> width: 200px;<br> height: 200px;<br> font-weight:bold;">deepskyblue;<br> display: table;<br> }<br> .cell{<br> display: table-cell;<br> vertical-align: middle;<br> font-weight:bold;">lawngreen;<br> }<br> .content{<br> font-weight:bold;">yellow;<br> }<br></style><br> <div class="container"><br> <div class="cell"><br> <div class="content"><br> Content<br> </div><br> </div><br> </div><br></body><br></html>
<!DOCTYPE html><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <title>vertical-center</title><br></head><br><body><br> <style><br> .container{<br> width: 200px;<br> height: 200px;<br> background-color: #003366;<br> position: relative;<br> text-align: center;<br> display: table;<br> }<br> .content{<br> width:100px;<br> height: 100px;<br> background-color: yellow;<br> position: absolute;<br> top:50%;<br> margin-top: -50px;<br> left:50%;<br> margin-left:-50px; <br> }<br> .point{<br> width:50px;<br> height: 50px;<br> position: absolute;<br> top: 50%;<br> margin-top: -25px;<br> left:50%;<br> margin-left:-50px;<br> background-color: green;<br> }</style><br><br> <div class="container"><br> <div class="content"><br> <div class="point"><br> point goes here.<br> </div><br> </div><br> </div><br></body><br></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>haorooms不固定高度div写法</title> <style>.center { position: fixed; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%;-webkit-transform: translateX(-50%) translateY(-50%);} </style></head><body> <div class="center"></div></body></html>-webkit-transform: translateX(-50%) translateY(-50%);-moz-transform: translateX(-50%) translateY(-50%);-ms-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);
justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;
就先写这么多吧，先吃饭去啦~
立即学习“前端免费学习笔记（深入）”；
