Square-Box Vertical Center

Developer
Tom Lutzenberger
Size
2,774 Kb
Views
32,384
  1. Square-Box Vertical Center Previews
  2. Square-Box Vertical Center HTML Codes
  3. Square-Box Vertical Center CSS Codes

How do I make an square-box vertical center?

In a clients project I needed to center content vertically, without knowing how much content it was. No Javascript.. What is a square-box vertical center? How do you make a square-box vertical center? This script and codes were developed by Tom Lutzenberger on 24 August 2022, Wednesday.

Square-Box Vertical Center Previews
IQ Test

Square-Box Vertical Center - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Square-Box Vertical Center</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="row"> <h1 class="col-xs-12 text-center">Vertical centered square boxes</h1> <div class="col-xs-12 alert alert-info text-center"> <p>The class <code>.square-wrap</code> provides the square shape, while the inner classes (<code>.v-center-wrap</code> and <code>.v-center</code>) do the alignment.</p><strong>Always square. Always vertical centered. No matter the size.</strong> </div> <div class="col-xs-1 col-xs-offset-3"> <div class="square-wrap"> <div class="product v-center-wrap"> <div class="product-content v-center text-center"> <h3>ABC</h3> </div> </div> </div> </div> <div class="col-xs-2"> <div class="square-wrap"> <div class="product v-center-wrap"> <div class="product-content v-center text-center"> <h3>Product</h3> <p>Some text and data</p> </div> </div> </div> </div> <div class="col-xs-3"> <div class="square-wrap"> <div class="product v-center-wrap"> <div class="product-content v-center text-center"> <h3>Product</h3> <p>Some text and data</p> </div> </div> </div> </div> </div>
</div>
</body>
</html>

Square-Box Vertical Center - Script Codes CSS Codes

.square-wrap { height: 0; margin-bottom: 30px; overflow: hidden; padding-top: 100%; position: relative;
}
.square-wrap > div { height: 100%; margin-bottom: 0; margin-top: -100%; position: absolute; width: 100%;
}
.v-center-wrap { display: table;
}
.v-center-wrap > .v-center { display: table-cell; vertical-align: middle;
}
.product { background: #40f; color: #fff; padding: 10px;
}
.product:hover { background: #80f; cursor: pointer;
}
.product h3 { margin: 0;
}
Square-Box Vertical Center - Script Codes
Square-Box Vertical Center - Script Codes
Home Page Home
Developer Tom Lutzenberger
Username tomlutzenberger
Uploaded August 24, 2022
Rating 3.5
Size 2,774 Kb
Views 32,384
Do you need developer help for Square-Box Vertical Center?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Lutzenberger (tomlutzenberger) Script Codes
Name
Palindrome check
Weather widget
Auto-scaling iframes
Hxgn
A Pen by Tom Lutzenberger
Square-Box Vertical Center - Method 2
Standard Template
Pseudo ASCII-Art
CSS Folders
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!