-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathverticalAlign.html
47 lines (41 loc) · 1.24 KB
/
verticalAlign.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>skill show</title>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/mycss.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</head>
<body class="skillcontent">
<div class="jumbotron masthead">
<h1>Most used font-end skills and technologies</h1>
<h2>最常用的前端技巧和技术</h2>
</div>
<div class="container-fluid">
<div class="content content-header">
<h3>How to Center Elements Vertically, Horizontally or Both</h3>
</div>
<div class="content">
Here are two ways to center divs within divs.
One way uses CSS Flexbox and the other way uses CSS table and positioning properties.
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
</div>
<div class="content">
<pre>
<code>
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
</code>
</pre>
</div>
</div>
</body>
</html>