Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body{
margin:0;
}
#wrapper{
width:100%;
height:100vh;
border:3px solid red;
box-sizing:border-box;
background-color:cyan;
}
p{

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}
</style>
</head>
<body>
<div id="wrapper">
<p>hello world ! this should be in center...</p>
</div>


<script id="jsbin-source-css" type="text/css">body{
margin:0;
}
#wrapper{
width:100%;
height:100vh;
border:3px solid red;
box-sizing:border-box;
background-color:cyan;
}
p{

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

</script>
</body>
</html>