Centering a div with a full width/height border - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div Border

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Div Border

Description

Centering a div with a full width/height border

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

html, body{
   height: 100%;
}
body#home-page<!--  w w w  .jav  a  2s .  c  o  m-->
{
   background-color: #000000;
   margin: 0;
}
body#home-page main
{
   display: table;
   padding: 20px;
   width: 100%;
   border: 8px solid #FFF;
   margin: 0;
   box-sizing: border-box;
   height: 100%;
}
body#home-page main div
{
   text-align: center;
   margin: 0 auto;
   vertical-align: middle;
   width: 50%;
   height: 100%;
   display: flex;
   align-items: center;
}
body#home-page main div p
{
   font-size: 12px;
   color:#FFF;
   line-height: 1.4;
   letter-spacing: 1px;
}


      </style> 
 </head> 
 <body id="home-page"> 
  <main> 
   <div> 
    <p>Lorem ipsum dolor sit amet, duis eros posuere sit, volutpat nec massa sit a ac, amet pede eu justo, suspendisse adipiscing viverra. Amet quisque, justo elit dui orci aliquam praesent, et condimentum nibh. Ultricies cubilia eu fringilla elementum erat, arcu metus dictum id feugiat, ultricies interdum elementum, magna nec urna sit non condimentum a, massa tempus nibh. Eros turpis in erat sed, adipiscing a molestie, eros arcu. Est at est nec augue</p> 
   </div> 
  </main>  
 </body>
</html>

Related Tutorials